Dark Mode & Images .svg.png: Invisible on Black Background

Howdy y’all,

Ever since the appearance of Night Mode, certain images have not displayed for me, either on the desktop version or the iOS version of Anki. For the most part these are .svg images which default to saving as .png on macOS. Examples would be images like those on the Wikipedia page for 人, like this one:

image

When I view an image like this in Anki in Night Mode, the lines remain black, but the background also becomes black, and the Anki window is black: so it becomes invisible. (Actually, on Anki desktop on macOS the window background isn’t as black as the lines, so you can still faintly see something. But on iOS, I can’t see anything at all.)

I guess one workaround would be “don’t save .svg as .png, duh!” Other images I have don’t suffer from this problem. But that would still leave me with a lot of images in cards created pre-Night Mode that would have to be replaced.

I’m using Anki desktop version ⁨2.1.42 (8eebfe18)⁩ for macOS, and 2.0.72 (20072.3) on iOS. I’m using the built-in Night Mode, not an add-on.

Is there something in the Anki settings that I’m not seeing that could make these images visible? More generally, what is it about these particular .png images that causes this behavior?

Any suggestions would be greatly appreciated.

Peace out,
t

1 Like

The png images on that page have a transparent background color rather than white, and the background color of those images are set to white with CSS. Just like the page does, you can set a background color of the images by adding something like the following to the styling section.

.nightMode img {
    background-color: white;
}

4 Likes

Thanks, @hkr ! That’s very helpful.

It seems from how you’ve done it in your screen shot that this is something I’d implement in a particular note type. So if I have this occurring in cards from different note types, I’d have to adjust the CSS in those other note types as well. Is that about right?

Is there a more global way to handle it, should I find I have a lot of those types?

Also, is there a way to restrict it to just this type of image? (It seems like the way you’ve done it would apply to any image.)

Peace out,
t

1 Like

I think that’s right.

If you only consider Anki desktop and Ankimobile, you could probably use “reviewExtra” to set global CSS, but Ankiweb and AnkiDroid don’t seem to support "reviewExtra". I think it’s better to add the CSS to each note type.

It might be technically possible, but I think it would require complex javascript. The background-color property for <img> tag has no effect unless the images have a transparent background layer, so I don’t think it’s necessary to restrict the target images.

2 Likes

Fantastic. Thanks very much for the recommendations. Incredibly helpful.

Peace out,
t

Hey thanks man, had the same problem