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…

2 Likes

Just a follow-up on this: