dark mode with white images

[danielweck]

Issue transferred from: edrlab/thorium-reader#1605

Originally posted by @civodulab

Why does the sepia theme change the white of my image ?

Tested on a .png and .jpg image.
Sepia theme

Night Theme

[danielweck]

CSS reference:

readium-css/css/src/modules/ReadiumCSS-night_mode.css

Lines 49 to 72 in 5830114

	:root:--night-mode img[class*="gaiji"],
	:root:--night-mode *[epub\:type~="titlepage"] img:only-child,
	:root:--night-mode *[epub|type~="titlepage"] img:only-child {
	-webkit-filter: invert(100%);
	filter: invert(100%);
	}
	/* Darken all images on user’s demand */
	:root:--night-mode:--darken-filter img {
	-webkit-filter: brightness(80%);
	filter: brightness(80%);
	}
	/* Invert all images on user’s demand */
	:root:--night-mode:--invert-filter img {
	-webkit-filter: invert(100%);
	filter: invert(100%);
	}
	/* Darken and invert on user’s demand */
	:root:--night-mode:--darken-filter:--invert-filter img {
	-webkit-filter: brightness(80%) invert(100%);
	filter: brightness(80%) invert(100%);
	}

[civodulab]

But I need to keep the white of my image in sepia mode. How do I do this?

[mickael-menu]

A workaround that doesn't involve an update of Readium CSS is to use the day mode (appearance 0) and set the text and background colors manually:

  --RS__backgroundColor: #faf4e8;
  --RS__textColor: #121212;

[JayPanoz]

Yeah this is caused by the following in sepia mode:

readium-css/css/src/modules/ReadiumCSS-sepia_mode.css

Lines 42 to 47 in 5830114

	:root:--sepia-mode svg,
	:root:--sepia-mode img {
	/* Make sure the proper bg-color is used for the blend mode */
	background-color: transparent !important;
	mix-blend-mode: multiply;
	}

At the time mix-blend-mode was added to keep consistent with other apps doing this in sepia mode as well. Maybe we should revisit this decision if authors prefer to keep the background white.