search

johnfactotum / foliate-js

Render e-books in the browser
https://johnfactotum.github.io/foliate-js/reader.html
MIT License
420 stars 60 forks source link

Wrong color on dark mode #5

Closed tcanabrava closed 1 year ago

tcanabrava commented 1 year ago

My browser is set to dark mode, and when I try to load Rust From Zero To Prod epub I got this:

image

I can't share the book for legal reasons, but if you need a copy I can talk to the author and point here.

johnfactotum commented 1 year ago

Currently the demo reader (as well as Foliate's gtk4 branch) forces color-scheme: light dark; on the page. This works with prefers-color-scheme to automatically style the page in dark mode. And for the publisher, they can also use the media query in the book's CSS.

But prefers-color-scheme is relatively new and probably not widely used in e-books. In the old days, books can either

  1. detect dark mode with Apple Books' __ibooks_internal_theme attribute,
  2. detect dark mode with JavaScript, or
  3. most commonly, to just not support dark mode at all; for reading systems, this means that in order to force dark mode, it needs to a. provide an invert color filter, or b. the option to override colors (like the Dark Reader extension for browsers).

These, except 3b, are supported in Foliate 2.x but not yet implemented in the gtk4 branch or foliate-js.

johnfactotum commented 1 year ago

I think this can be closed, as foliate-js now exposes a part named filter. Whether or how to use this is up to the consumer of the library. In Foliate's gtk4 branch it uses this to implement the option to invert the page in dark mode. I won't add this to the demo reader for now, as currently it's just a very bare bones example reader.

Similarly, __ibooks_internal_theme and other overrides should be handled outside the library. But I guess to do that it should have an API similar to rendition.getContents() in Epub.js.