[BUG]: Color Inversions in Night Mode

[brishtibheja]

Checked for duplicates?

• This issue is not a duplicate

What are the steps to reproduce this bug?

I am no programmer. So I may not be able to properly explain things using my 8th grade html knowledge. But here's an attempt. I have modified one of my note types to include this
#word {
font-size: 30px;
margin-bottom: 16px;
color: chocolate;
text-align: center;
border-radius: 12px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
padding: 24px;
margin: 12px;
border: 1px solid #D9D9D9;
}

Expected behaviour

In a normal world the chocolate colour is the colour of chocolates.

Actual behaviour

In anki, chocolate is the colour of the sky.

The 凛 here should have been a different color.

Debug info

AnkiDroid Version = 2.16.0beta5

Android Version = 11

ProductFlavor = full

Manufacturer = realme

Model = RMX2193

Hardware = mt6768

Webview User Agent = Mozilla/5.0 (Linux; Android 11; RMX2193 Build/RP1A.200720.011; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/114.0.5735.147 Mobile Safari/537.36

ACRA UUID = dce906d5-19f7-4514-a0e4-0071f4f7b489

New schema = false

Scheduler = std2

Crash Reports Enabled = true

DatabaseV2 Enabled = true

(Optional) Anything else you want to share?

Similar problems arise with colours in anki when I'm in dark mode(and I'm always in dark mode). See these two screen shots of a note/card from a different deck.

Research

• I am reporting a bug specific to AnkiDroid (Android app)
• I have checked the manual and the FAQ and could not find a solution to my issue
• (Optional) I have confirmed the issue is not resolved in the latest alpha release (instructions)

[welcome]

Hello! 👋 Thanks for logging this issue. Please remember we are all volunteers here, so some patience may be required before we can get to the issue. Also remember that the fastest way to get resolution on an issue is to propose a change directly, https://github.com/ankidroid/Anki-Android/wiki/Contributing

[BorisNA]

I believe this is not a bug, but a feature: color inversion in the dark mode to improve readability.

I use it in this way (tone coloring):

.tone1 {color: red;}
.tone2 {color: green;}
.tone3 {color: blue;}
.tone4 {color: darkmagenta;}
.tone5 {color: gray;}
.night_mode .tone1 {color: red;}
.night_mode .tone2 {color: green;}
.night_mode .tone3 {color: deepskyblue;}
.night_mode .tone4 {color: magenta;}
.night_mode .tone5 {color: gray;}

[brishtibheja]

@BorisNA I don't know really. How does it even improve readability? If it was a feature, there should be an option to turn it off. I most of the time cannot even figure out which word to choose to display a certain color.

[BrayanDSO]

Colors are inverted in night mode if the CSS doesn't specify a .night_mode or .nightMode selector somewhere. Adding one (maybe even empty) should avoid this

[BorisNA]

@sorata225 - as for readability, dark colored font is good for the light background, but is unreadable on the dark one. And vice versa.

See my example with magenta/darkmagenta and blue/deepskyblue. It was done on purpose, since I use the card both on a desktop (with the light scheme) and on a phone (with the dark oled theme). If I use just one color it won't be readable in both cases.

And yes, you can turn this off with .night_mode {}