How to Handle Transparent Images for Dark Mode?

[Slevin#7]

I have some transparent PNG images (text-dividers and simple grafics). These images are no pictures but only simple drawings.

Since I wanna make sure that they can be seen and read in dark mode as well I've created two versions, one with black lines and text for the light mode and one in white for the dark mode. Both images have a transparent background to fit in nicely in the current active desgin.

While Apple Books displays the images correctly, Google Play Books won't comply in dark mode. Although Google Play Books grabs the intended image for the dark mode, it will add a light background to it for no reason, making the image a light square and completely unreadable, since the image for the dark mode consists only of white content.

How can I insist Google Play Books to keep their fingers off the image and leave it in original state? I'll get it, that Google thinks we developers are too stupid to cover these details, but what, if there are some eBook creators out there in the wild who actually know what they are doing (or at least think to know)?

I don't wanna create an extra version for dark mode without transparent background but dark background, since the background color set on the device varies.

How do you guys handle this issue for readers which do alter transparent images?

For testing reasons I've added an eBook which contains a text-divider which serves for both light and dark mode (the grafic is black and white for this purpose), and a line drawing in two versions, one for light and one for dark.

[RbnJrg]

Originally Posted by Slevin#7

I have some transparent PNG images (text-dividers and simple grafics). These images are no pictures but only simple drawings.

Since I wanna make sure that they can be seen and read in dark mode as well I've created two versions, one with black lines and text for the light mode and one in white for the dark mode. Both images have a transparent background to fit in nicely in the current active desgin.

While Apple Books displays the images correctly, Google Play Books won't comply in dark mode. Although Google Play Books grabs the intended image for the dark mode, it will add a light background to it for no reason, making the image a light square and completely unreadable, since the image for the dark mode consists only of white content.

How can I insist Google Play Books to keep their fingers off the image and leave it in original state? I'll get it, that Google thinks we developers are too stupid to cover these details, but what, if there are some eBook creators out there in the wild who actually know what they are doing (or at least think to know)?

I don't wanna create an extra version for dark mode without transparent background but dark background, since the background color set on the device varies.

How do you guys handle this issue for readers which do alter transparent images?

For testing reasons I've added an eBook which contains a text-divider which serves for both light and dark mode (the grafic is black and white for this purpose), and a line drawing in two versions, one for light and one for dark.

The problem here is that not all ereaders honor "@media (prefers-color-scheme: dark)" and so never your transparent .png for dark mode is enabled. If "@media (prefers-color-scheme: dark)" were honored, and you don't want to have two transparent .png (one for light, one for dark mode), you can appy the property "filter: invert(1) hue-rotate(180deg);" to your light mode png. Google Play Books is an awful ereader; its support for epub3 is very limited (and your ebooks are epub3) so don't expect much regarding to what Google Play Books can offer.

I made some minor modifications to the epub you uploaded, and it works in CHROME and FIREBOX Try the following test:

1. Open the epub in Sigil.
2. Right-click on the Section0001.xhtml sheet and select "Open with..."
3. Choose to open that file with Chrome or Firefox.

Why did I tell you to open that sheet with one of those browsers? Because they handle "@media (prefers-color-scheme: dark)" well, and if you change the light mode to dark mode and vice versa, you'll see that everything appears as expected.

The problem is e-readers that don't respect @media and don't detect the change to dark mode.

[Slevin#7]

Originally Posted by RbnJrg

"filter: invert(1) hue-rotate(180deg);"

This is great advice, many thanks. I'd have to make some smaller additional changes since pure white is too much of a contrast, but modern CSS filter might be a viable way.

The problem with Google Play Books was not that it didn't respect the media query but altered the background without any reason. Google might be thinking to provide a better contrast, but dind't realize there was a specific image exactly for that purpose.

Now, let me ask the 1 million dollar question: what will Kindle do? Is Kindle able to manage media queries and modern CSS like "filter: invert" etc.? And what about the other usual readers, can they handle this solution, or might it still bebetter to provide 2 distinct images for light and dark?

[Turtle91]

You can also try using a mask. This was talked about a bit in this thread.

and here.


That allows the image to be seen regardless of the light/dark mode, and you don't need to make multiple images.

[RbnJrg]

Originally Posted by Slevin#7

This is great advice, many thanks. I'd have to make some smaller additional changes since pure white is too much of a contrast, but modern CSS filter might be a viable way.

Employ "filter: invert(0.8)"

Now, let me ask the 1 million dollar question: what will Kindle do? Is Kindle able to manage media queries and modern CSS like "filter: invert" etc.?

Kindle doesn't support transparent .png so you can't apply "filter: invert(x)" on them. Even if Kindle were to support "@media(prefers-color-scheme: dark)," there's no way to take advantage of this unless you use .jpg images with a white background and black colors for light mode, and images with a black background and white colors for dark mode, with the former showing and the latter hiding. But that's not a acceptable solution either.

And what about the other usual readers, can they handle this solution, or might it still bebetter to provide 2 distinct images for light and dark?

AFAIK, so far none of the e-readers can adequately handle code that allows images to adapt to the user's display mode. Your only option is to work in epub3, using JS to detect the background color, and then display .pgn files that adapt to that background color.

[RbnJrg]

Originally Posted by Turtle91

You can also try using a mask. This was talked about a bit in this thread.

and here.


That allows the image to be seen regardless of the light/dark mode, and you don't need to make multiple images.

The approach is elegant and very clever, but the problem is that, like the others (including mine), it doesn't work on e-readers. It looks fine in Sigil, but if you change the background color in one of its plugins (e.g., Readium), you'll see that the image doesn't react to it. The same happens in Thorium and Calibre Viewer. It also has issues in Chrome and Firefox. Ideally, @media (prefers-color-scheme: dark) would work, but e-readers don't receive the change to the dark/light theme .

[Turtle91]

I didn’t look recently, but I thought using the mask tied the mask color to the font color. Whatever color was selected with the theme would change the image. It didn’t specifically react to just background color.

[RbnJrg]

Originally Posted by Turtle91

I didn’t look recently, but I thought using the mask tied the mask color to the font color. Whatever color was selected with the theme would change the image. It didn’t specifically react to just background color.

And you are right. In Sigil, it works as expected but in ereader, it doesn't. Do the try in Thorium or Calibre Viewer, change the color theme and you'll see how masks work (or better said, don't work). The solution you posted is bright, a real pity that ereaders don't honor it.