Off-the-rack night theme about readium-css HOT 8 CLOSED

But "coloring" and "inverting" should be kept separated IMO. People could want the image to be darkened, or be applied a sepia filter, but still don't want to be inverted in a full night mode.

Sorry if it was unclear, darken and invert would be 2 different switches, obviously (this is how I implemented them yesterday BTW).

For the record:

• darken uses filter: brightness()
• invert uses filter: invert()

As for sepia, we currently apply a mix-blend-mode by default so that white backgrounds are sepia—that may change in the future. Unfortunately filter: sepia() has way too much impact on colors when it comes to photos.

Thanks for the feedback!

from readium-css.

Please note this is related to personalization:

• Personalization Semantics
• Draft of user settings, a section which has not beed addressed yet
• PWG Personalization Task Force Minutes (July 27)

from readium-css.

For gaiji, we’ll take the Japanese EPUB profile as a reference: http://ebpaj.jp/cmspage/wp/wp-content/uploads/2015/04/ebpaj_epub3guide_ver1.1.3-en-1.zip

from readium-css.

An interesting idea from Wikipedia that we might implement as well, especially as it is one line of CSS: letting the user darken all images in night mode (sorry, screenshot in french)

In that case, having another switch for inverting all images could be offered as well, it may be unperfected but for some books, it could solve a lot of issues (headings or table as images, B&W illustrations, etc.).

from readium-css.

Won’t invert images

I think it's a safe approach. In the vast majority of cases, images should not be inverted.

and this is why I’m pushing for a mechanism so that authors can signal some images must be inverted. It could be ARIA territory (cc @rdeltour) since it also impacts high-contrast mode in nasty ways (cf. google issues in Chrome implem);

An author-defined mechanism might be interesting. The right venue to ask for feedback/interest could be WICG.

Another approach, as you state in you last comment, is to have a user preference. But "coloring" and "inverting" should be kept separated IMO. People could want the image to be darkened, or be applied a sepia filter, but still don't want to be inverted in a full night mode.

from readium-css.

As an update, I did a quick round of testing today and night mode is quite alright. Darken and invert options definitely help, they can improve comfort pretty dramatically in some illustrated-heavy publications.

Haven’t had the time to check everything yet but that’s a good start, we don’t have any major issue to deal with.

from readium-css.

After further testing, we’d probably better create some kind of CSS inverted variable implementers can use.

The assumption is:

• we have styles which sole purpose is applying the night mode (their reusability is null at the moment, and that doesn’t philosophically fit that well in our design approach);
• users are currently able to override it (applying night mode then setting their own background and text color in advanced settings);
• the night theme stylesheet could be used to manage all inverted modes (custom colors set by the user);
• invert state can be interpolated from the custom background-color (it’s a range in rgba?);
• theme variables could become user variables with a fallback;
• themes would therefore become part of user settings, and would be appended on load (no extra stylesheet necessary).

Benefits for implementers:

• night modes (plural) from the same stylesheet;
• inverting images could use a dynamic factor (variable), based on the colors picked by the user (which means it can also be 0 to not invert images if needed);
• sepia could be adopting this approach as well (for pastel backgrounds, which would be useful in terms of a11y);
• extra flexibility.

On the other hand, we should probably start discussing a fallback mechanism for browsers which don’t support CSS variables. Although we’re not impacted with the reference implementations (iOS + Readium Desktop), some implementers will have to deal with IE11 and Edge 14 (web app).

I can open a dedicated issue now but feedback from implementers will come later, obviously (it needs practical implementations to see which options are the best ones).

from readium-css.

Closing this issue since we’re past design and it should be now managed on an issue-by-issue basis.

As an update, handling of OSs’ invert setting (a11y) has been improved a little bit (must still do extended testing).

Last comment I posted should be a (new) specific issue as well, since it is not about the night mode per se but re-usability of the sepia and night mode modules.

from readium-css.