[Feature Suggestion] Auto Invert Line Color in Night Mode

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: