CSS color is mixed with the theme

I’m been using Windows and Android version at the same time.
The CSS is display correctly on Windows,
but it seems the color is mixed with theme of App on Android.

As following screenshot, the left one is on Android system.

My CSS configuration:

.card {
    font-family: arial;
    font-size: 20px;
    text-align: left;
}

.word {
    margin-top: 3em;
    font-size: 26px;
    color: #F9F54B;
}
.meaning {
    line-height: 1.2em;
    color: #BEFFF7
}
.sentence {
    margin-top: 1em;
    font-family: Sans;
    font-size: 24px;
    font-style: italic;
    color: D5CEA3;
    line-height: 1.2em;
}
.synonym {
    margin-top: 1em;
    font-family: Noto Sans;
    letter-spacing: 0.3px;
    color: #03C988;
}
.usage {
    color: #FBDCC4;
    font-style: italic;
}

Any idea would be appreciated.

AnkiDroid handles dark mode differently and will change the colors inverting them, I think.

Since your CSS is already set up for dark mode you can disable the change in AnkiDroid adding this to the CSS section:

.night_mode { }

I think this should disable any changes.

Alternatively, you could set each section in your CSS styling to have a different aspect depending on whether it’s on light or dark mode. For example, if you want to use black letters in light mode and white letters in dark mode, you could use the following for the .usage section in the CSS:

.usage {
    color: black;
    font-style: italic;
}
.nightMode .usage {
    color: white;
    font-style: italic;
}
3 Likes

Thanks a lot.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.