Change tag color in preview mode

Help
1

Hey folks, I was wondering how can I change the colour of tags in preview mode, as I couldn’t find the option on my .css

My .css file only allows me to change the font in edit mode, so the link font and the tag font are the same on preview mode.

Any suggestion is welcomed! (I also attach my .css file in case you want to take a look at it)

obsidian 20.06.14.css (26.6 KB)

2

Hello,

I included below a snippets css file which I use to control tag colors. (You can upload it to your snippets folder → activate from the appearance tab and you are good to go once you decide on the colors).

Now for the specific parameters you need to modify, I did not understand what you were referring to specifically by ‘tag color’ so I will include what comes to mind below and you choose what you desire (all things below are for preview mode):

  • Tag text color: to modify this what you need to change mainly is --text-a: var(--bright-orange); in the .tag list in the file attached below (first group) what this does is it changes the color of text that is also a link to the color you specify. If you only change color: black; option (which is in the same block) you will see no difference for tags are considered links (><)
  • Tag background color: which gives you a nice colored box around your tag text (specified above) change - obviously - background-color: #333333; in the .tag group.
  • Single tag color: the css also includes the code to color specific tags which might come in handy later on if you want.

These are the big options, you can remove and modify as you experiment and keep what you want.

Let me know if you need more help or if something is unclear.

PS: this css was made from snippets posted here on the forms mainly from the post:

tag_colors.css (1.3 KB)

Edit 1:
I just checked the css file you shared, you seem to have added the css for the tag at the end of your file but did not specify the parameters I mentioned above. Try adding them in your file if you want and see if it changes.

However, I suggest you do it as a snippets this way you keep track / organize better you css modifications and if later on you want to test out various themes you don’t have to modify the main css theme file everytime, it’s a matter of preference anyway

2 Likes
3

Thank you for the quick reply.

Your tip has worked fine, I’ll use snippets more often now!

1 Like
4

I use the CSS “Typora like custom CSS”
Is there any way of making colored tags in the editor mode?

5

Is there a way to do that in Android?

6

Hi,
This solution doesn’t work for me. It works totally fine in the preview mode, but not at all in the edit mode. I am using the obsidian default theme. See attacked for CSS snippet.
tag_colors.css (1.3 KB)

7

I have made a plugin for this, you can try it out