readium / readium-css

🌈 A set of reference stylesheets for EPUB Reading Systems, starting with Readium Mobile
https://readium.org/readium-css/
BSD 3-Clause "New" or "Revised" License
89 stars 20 forks source link

dark mode with white images #114

Open danielweck opened 2 years ago

danielweck commented 2 years ago

Issue transferred from: https://github.com/edrlab/thorium-reader/issues/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 image Night Theme image

danielweck commented 2 years ago

CSS reference:

https://github.com/readium/readium-css/blob/583011453612e6f695056ab6c086a2c4f4cac9c0/css/src/modules/ReadiumCSS-night_mode.css#L49-L72

civodulab commented 2 years ago

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

mickael-menu commented 2 years ago

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 commented 2 months ago

Yeah this is caused by the following in sepia mode:

https://github.com/readium/readium-css/blob/583011453612e6f695056ab6c086a2c4f4cac9c0/css/src/modules/ReadiumCSS-sepia_mode.css#L42-L47

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.