Images being inverted in dark mode?

It seems like when I activate dark mode, if a picture is primarily black and white Anki inverts the colors? I have a picture of a car tyre, on a white background, which is now rendering as a white torus on a black background. A picture of a black movie projector on a white background is now an indistinct white blob on a black background.

You probably have an invert filter in your card templates.

I don’t know what that means?

See this part of the manual (and the following subchapters of chapter 7): Card Templates - Anki Manual.

Navigate to CSS / Styling tab. Then find code referencing invert or filter.

If you need help, then sent the css code (as text in a codeblock).

.card {

font-family: arial;

font-size: 20px;

text-align: center;

color: black;

background-color: white;

}



.card1 { background-color: #FFFFFF; }

.card2 { background-color: #FFFFFF; }

EDIT: Doesn’t really make sense as a solution given it only affects a small number of cards.

Then check if your affected cards are using that card template. Or if they have css attached in their fields.

Are those notes using images with svg filetypes?

Affected and unaffected cards are the same template.

I don’t know where I would see this, but I doubt it. I used the same process to create all the cards.

They’re both jpgs.

Check the < > button on an affected card (e.g. in the browser or via edit dialog).

CSS can invert JPG and PNG images too. You checked your Styling, but also check your front/back card templates, as well as the field of the notes (click < > above the field to open the HTML view) for inline CSS.

1 Like

There isn’t any.

Can you share your card in question in any way?
Also, does this happen on desktop or any other Anki platform? Do you have any add-ons installed?

I don’t know, can I? It’s the Fluent Forever template, though I don’t recall how I actually got my hands on it.

Only on desktop, I believe. My phone has always been in dark mode and I never noticed an issue there, though I’m not sure how much I used my phone (last night was the first time I’ve picked up my deck in over a year).

It’s there – above the field, in the Browse window note editor.
image

And this too –

Click Cards... – the same place you found the Styling.

Yes, I found the button. I meant there’s no CSS there.

There are too many shared decks which have this in their names: https://ankiweb.net/shared/decks?search=Fluent%20forever I’ve tried a couple, but their styling didn’t match the css you provided earlier. Without the actual cards you are using it will be hard to guess what causes the observed effect.

You can export your cards using File → Export and selecting Anki Deck Package as the “Export format” (include media should be useful as well, but if the resulting file is too big, it’s better to make a new temporary deck containing only a couple of problematic cards first and export only them). Then you can use google drive or any other file hosting service to share the deck.

Keep in mind that css can take many forms. It can be added as html attributes (<img style="...">), as content of the <style></style> tags, or even assigned using JavaScript (for example someElement.style.someProperty = ... or style.setProperty(...)).

Is your collection synced to AnkiWeb? Give me some text of one of the cards, the name of the note type, the filename of the image, something so that I can look for that note in your collection.

1 Like

I can’t include links in my posts, apparently, so its drive dot google dot com/file/d/1wAR5tWlsOFZ6ZQ9LUv4uXTNIQoafS_5L/view?usp=sharing

The images appear just fine for me with the dark theme:

and the code in the templates and the fields indeed appears to be very minimal. So it shouldn’t be anything related to the cards themselves. Which brings us back to the question

Or, maybe, some system-wide settings that might be trying to perform some accessibility modifications?

None I’m aware of.