How to give different colours to tags in the Tag Pane?

Hello, everyone!

I would like to know if anyone would have a suggestion on how to make tags be displayed with different colours in the tag pane too.

Right now, I am using:

.tag-pane-tag-count {
  background-color: var(--text-accent);
  border: none;
  color: white;
  font-size: 11px;
  padding: 1px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 0px 0px;
  cursor: pointer;
  border-radius: 14px;
}

.tag-pane-tag-text {
  background-color: var(--text-accent);
  border: none;
  color: white;
  font-size: 11px;
  padding: 1px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 0px 0px;
  cursor: pointer;
  border-radius: 14px;
}

And I wonder if there would be a way to use something similar to:

.tag[href^="#to-watch🎬"] {
  background-color: #FC766F;
}

But for .tag-pane-tag-text, so the tags on the tag pane would display the same as in my notes (see screenshot)

I am bearly good enough at CSS to change some things in my theme and understand what everything is doing when I have it right under my nose… But not good enough to imagine new ways to do things…

3 Likes

Just a follow-up on this:

I created colored tags with ‘Tag Pills’ but is there any way to apply same background-color to tags in the tags panel? Or is there any way to change the colors of individual tags in Tag Panel? with @Chamsae code I was able to change the colors of all of them, but I want to change the colors of individual tags in tags panel.
E.g for #important color red set, but in tags panel it still in normal way.

I got my tag colors to work, but the font color isn’t white. How can I change it? Right now the font color is a light blue.