Help - clickable tags

Add-ons
1

Hello, i need help using the “clickable tags” add-on.
i’m using night mode on anki, and I can’t see the text in the tags because it’s white. Could you explain me how to change this color?

Also, could it be possible to use the color from “colorful tags” to change the background of the clickable tags?

-i’m french so sorry for all the mistakes I made-

2

To change the tags’ color when night mode is active, try this:

Front/Back template: wrap the tags field with a span and assign a class to it:

<span class="tags">
  {{clickable:Tags}}
</span>

Then add this to the Styling section:

.night_mode .tags {
  color: black;
}

Regarding the ‘colorful tags’ add-on, I have no experience with it so I’m afraid I can’t help you.

By the way, if the add-on you’re talking about is this one, from a quick glance its functionality seems to be limited to the Browser, so there may be no easy way to use it to change the color of the tags when reviewing.

3

thanks, it solved my issue.

Do you now why we can directly use .hint or .cloze in CSS style, but we have to add for tags?

4

{{hint:Field}} and {{cloze:Field}} are treated as special syntaxes by Anki, and the program automatically adds some ‘extra’ HTML code to the fields.
This code includes, among other things, a class that can be used in the CSS.

Details about the code
  • This is the HTML code of a generic hint field:
<a class="hint" href="#" onclick="this.style.display='none';
document.getElementById('hintc531a80aa90a9252').style.display='block';
return false;">Hint Field</a>
  • And this is the HTML code of a generic cloze deletion (Front side of the card):
<span class="cloze" data-cloze="answer" data-ordinal="1">[...]</span>

By the way, I just checked the HTML of {{clickable:Tags}} and it turns out that the add-on also automatically adds a class!

Here is the behind-the-scenes code:

<kbd class="clickable-tag" onclick="ct_click('Tag')" ondblclick="ct_dblclick('Tag', 'Default')">Tags</kbd>

So you should be able to simply use .clickable-tag in the CSS, without the need to wrap the field with a custom span.

5

Thanks a lot!