CSS nightmode is not changing black text to white (filter invert)

643 Views Asked by At

I'm using CSS to change the appearance of night mode on Anki/Ankidroid. Since I use lot of highlight and the regular nightmode only change the backround and the text. It makes unreadable a white text with a yellow highlight... So I used the invert filter to invert all the colors and it worked terrific BUT the black text remains black and unreadable

My code is

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

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

And here is a screenshot of the problem (even the red text changed to cyan and the yellow highlight to dark blue)enter image description here

1

There are 1 best solutions below

0
On

Anki already has a night mode feature, and I suggest you hook on that instead of making your own classes. You can read more here, but the main point is that when you go in the settings and set night mode, the tag that contains all the content of the card has the class nightMode.