[Feature Suggestion] Auto Invert Line Color in Night Mode

AnkiDroid (Android) Suggestions
1

The problem and how to reproduce it

I have night mode enabled on the Ankidroid android app, with black (amoled) as the color setting for the background.

Many of the decks I use have transparent images, which are black lines; and they essentially seem to disappear when using black night mode (an example of this can be seen in the shared deck named “Music Key Signatures”, which I downloaded from the Music section on AnkiWeb and can be used by anyone).

The solution

I already have a solution for this:

I add the following at the end of CSS cards on all of my decks.

When I encounter a card where clearly black lines “disappear” because there’s no white background to make them visible, I go to the kebab menu at the top right of the Android app > then Edit Note > Cards (at the bottom) > Styling (at the bottom for me, but I understand some other versions have the tab selection on the top?), then I add the following code at the end (though I believe it can be at the top too, of the user prefers):

/* ============================== */

/* NIGHT MODE */

/* IMAGE INVERT CONFIGURATION */

/* ============================= */

:root {

/* ============================== */

/* Adjust Invert Parameter Here */

/* ============================= */

/* IMAGE INVERT Toggle */

–image-invert-toggle: 1;

 /\* Set to 1 above to invert image colors   \*/

/\*         or 0 to leave images unchanged  \*/

/* when night mode is enabled */

}

/* Invert transparent images in night mode */

.nightMode img, .night_mode img {

filter:

invert(var(--image-invert-toggle))

hue-rotate(calc(180deg \* var(--image-invert-toggle)));

}

How this solution works

This code inverts the color of lines, text, etc, but ONLY when night mode is enabled.

And just in case the user wants to, it is possible to toggle off the functionality of the script by editing the first parameter to zero.

Simple, really.

For clarification, I got to the CSS code above using AI, and it is my understanding that it targets the standard WebView night mode classes.

How this is different from the existing built-in behavior

I read somewhere that Anki has a global setting under Settings > Appearance > Invert images in night mode.

However, I searched for “invert” in settings on the full GitHub build and found no results; and my understanding is even if it exists in other versions, that setting inverts all images blindly (including full-color photos).

This approach is distinct because it targets transparent/black-line graphics specifically and preserves hues (hue-rotate), which I view as a key distinction worth highlighting.

My Feature Suggestion

Is it possible to implement a new toggle setting under the Appearance settings, that would allow for this to automatically be part of the CSS of all cards and decks?

Thanks for reading

I hope I wasn’t unclear in any way, but I’m here to explain if anything needs explanation.

And if I somehow missed an existing solution already built into the app, please forgive and point it out to me kindly :innocent::sweat_smile:

2

Is the behavior the same on desktop Anki?

3

If you’re asking if the default behavior is the same, I do not know.

If you’re asking if the CSS script I use works on desktop as well — it is supposed to (that’s why there’s two types: NightMode and night_mode in the script, if you look closely). But I haven’t tested it.

4

I’m sure if a developer is interested in taking up this feature, they’ll let you know if they need any additional clarification.

5

Indeed.

I got my solution for now. I have to add it to every deck but it’s not hard to do.

I just figured it’s something people are interested in so I’d suggest it. If they are interested, it’s here and I’m here :+1: I’m also sure if it can be done in a better way they can do it.