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

Custom CSS & Theme Design
1

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)

ģ£¼ģ„ 2020-07-25 155203
ģ£¼ģ„ 2020-07-25 1552031659Ɨ934 152 KB

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ā€¦

5 Likes
2

Just a follow-up on this:

3

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.

1 Like
4

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.

2 Likes
5

I have the exact same question and could not find a way to use a custom color based on the tag label for the Tag Pane, even if itā€™s working perfectly in reading modeā€¦

Maybe someone has had more success since then ? :crossed_fingers:

@Saorsa You need to add !important to the color attribute you want to change. This is because a value has already been assigned to this property somewhere else in a parent attribute, and you need to specify that you wish to override it.

like: color: "white" !important;