Nightmode is messing up with text color

Anki Card Design
1

Last year I had a problem with darkmode bc I use lots of yellow highlight and when using night mode it remains yellow and I had a problem with readability (white text + yellow highlight)

So I start learning about CSS and found the invert color filters. Now everything works terrific EXCEPT the black text that remains black. Any help??? I’m tottaly noob at CSS but I thought the invert colors should work with all the elements

Here’s my CSS and a screenshot (everything is “negative” except the black text)

image
image720×762 82.8 KB 

.night_mode {
 background-color: #000000;
  filter: invert(1);
 
}

.night_mode img {
  filter: invert(1);
}
2

Your CSS does exactly what it promises. In night mode, text is white by default, so an inversion makes it black. Hence, you’d need to set the color to black first.

Inverting everything can get confusing really quickly, though. I would restrict the inversion to the highlight elements like this:

.night_mode span[style*="background-color"] {
  color: black;
  filter: invert(1);
}
2 Likes
3

Hey thank you so much. Now some highlights keep the regular color but I figured out tha if I edit, remove formatting then applying it again it works fine

Now I have to find a way to filter all the cards with highlight so I don’t have to check one by one

4

See if removing “span” from the CSS above helps. This will make the rule apply to any element that has an inline background-color style.