Separate colors for tags and for links?

I don’t know my way around the CSS very well and don’t know if this is possible, but is there a way to set the color for linked text and the color for tags differently? EG have links be green and tags be pink within a markdown file.

1 Like

I don’t know CSS well either but this should be possible. I’ve tried playing with CSS color options from different themes figure out which variable controls which element. You could always do some trial and error until someone has a proper answer :grin:

2 Likes

Yeah, looking closer I see that some styles do have this, I just don’t know how to add it in to a style that doesn’t.

Sure, here is an example that colors the links in preview mode:

.markdown-preview-view .internal-link {
    color: green;
}

.markdown-preview-view .external-link {
    color: blue;
}

.markdown-preview-view .tag {
    color: pink;
}

image

4 Likes

Thanks, this was helpful. It took me some time to track down the right part of the stylesheet but it’s actually working now!

1 Like

Hm, oddly (or not) the tags are still the old color within the popover when I hit the pound sign. Any suggestions for how to change this?

Hmm, I can’t really picture what you’re describing. Could you maybe post a screenshot?

Sure, here it is:

In the original CSS the tags were pink, but I added this to change that:

.cm-s-obsidian span.cm-hashtag,
a.tag {
color: var(–accent-2);

(accent-2 is the blue color. It worked on the editor and preview, but apparently not the popover.)

Your .cm-... tags apply only to edit mode. To color the preview mode (which the popover is in) I think you should probably use something like .markdown-preview-view .tag { color: var(--accent-2);}

Hm, but in preview mode the color change already works:

I tried adding in your line but the popover change. I do appreciate the help though! I’m trying to experiment with the element picker but I haven’t figured this out.

Aw bummer, sorry it didn’t work. I’ll play around a little and let you know if I find anything helpful.