Supports dark mode with color-scheme and prefers-color-scheme

[automactic]

Zim files are essentially bundles of html content, to support dark mode, one approach is to use CSS Color Schemes. While still in draft, it's already widely adopted. And I think this more standardized way of handling color scheme is better than rolling our own solution.

Step 1: let the browser know the page supports dark and light scheme:

:root {
  color-scheme: light dark;
}

or

<meta name="color-scheme" content="light dark">

Step 2: adjust existing css for specific color scheme

@media (prefers-color-scheme: dark) {
    xxxx
}

I know this step will take up a lot of time and energy, but in most of the situations, the user agent style sheet handles things pretty well.

Just by commenting out existing color and background-color css, I am able to make the page and plain text look nice on both light and dark scheme:

[kelson42]

I really wonder why this is not handle properly like this upstream on Wikipedia.org.

[Jaifroid]

Isn't there a proposal for an API in ZIMs that might handle this kind of transform? Currently the different readers handle dark mode by injecting CSS stylesheets. By using an inversion stylesheet and re-inverting certain image type, it's fairly easy to come up with a "universal" (though not perfect) dark mode, and that could be the API. (It's what most of the current readers do.)

Otherwise handling dark mode as a set of themes is something that each Wiki would have to provide, as they would need to be tailored to the different styles used.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be now be reviewed manually. Thank you for your contributions.

[Lucent]

Related #2086