Changing cards background depending on tag

Anki Card Design
1

I have a deck with different tags that I want to use to change the styling.

In the whole HTML of front and back I am using:

<div class="{{Tags}}">
</div>

and in CSS:

div[class*="specific_tag"] {
    background-color: #b5ead7;
}

Problem is, this is not changing the background of the card, but only of the content, leaving the rest of the card white.

Is there a way to modify the

.card {
    background-color: white;
}

from inside the CSS tag div so that the whole card adopts that color?

Deleting the property from the .card section of CSS didn’t work.

Thanks!

2

you need to do this in JS. also in CSS, you must set a default background color otherwise the previous card’s style is erroneously unchanged for the next card.

<script>
var tags = "{{Tags}}".split(' ');
var mapping = {};
var elm_card;

mapping['mytag']  = function() {
  elm_card.style.backgroundColor = '#b5ead7';
};

async function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function run() {
  if (document.readyState == 'complete') {
    elm_card = document.querySelector('.card');
    for (tag of tags) mapping[tag]?.();
  }
  // not fully loaded, try again in 0.1ms
  await delay(100);
  run();
}

run();

</script>
3

Thanks! I’ll try it later and let you know. :slight_smile:

4

ah, i got the bug wrong. you need to reset the elm_card.style.backgroundColor in JS instead of CSS, as setting it from JS also sets the inline style attribute.

another approach could be to create a <style> element with the style you want. that’d allow for Anki to clear out the contents automatically instead of manually resetting the style.

5

I am not sure I understand what you mean. I will have to try out the code you wrote later on the computer.

Is using <style> better or easier?

6

Sorry, I probably didn’t understand. I pasted the code in the HTML and then also in CSS, but it didn’t work. I am not sure what you mean by