Custom css to change link color based on link type

Things I have tried

What I’m trying to do

I am trying to get the color of [[]] links to change based on a the begining letter. For e.g. if I write a note [[z - this is a synthesis note]] , this link should appear in a different color. Either the color of the link is different or the link background is in a different color.

Similarly, if I have a note @adam2003, when I link this note [[@adam2003]], it should be highlighted in a different color.

Can anyone share a css snippet to achieve this ?

Try Folder Styles.css (13.2 KB). It is a snippet that is in SlRvb’s Journaling Setup.

You might want to look into:

Thanks for your reply. BTW do you follow Joel Chan’s ideas on knowledge work and synthesis?

I imagine you mean e.g., this article: Knowledge synthesis: A conceptual model and practical guide - Joel Chan - 2020

For sure! Joel and I have talked. He’s doing great work!

Yeah. I actually have been trying to get the kind of set up he has in Roam in Obsidian. He uses CSS to highlight different types of note links ( such as claim, question, citation, synthesis) in different colors. I tried the supercharged link plugin and it helps to get that effect to an extent. The only hiccup is that the changes are not shown in the editor mode and I don’t like to switch between editor and preview. In fact i have been trying to get the WYSIWYG in Obsidian as much as possible.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.