Dynamic theme

[jrappen]

Compare https://www.macstories.net/news/safari-technology-preview-allows-websites-to-switch-themes-based-on-mojaves-dark-mode/.

Maybe this would make sense? Haven't checked for how to check on newer Win10.

[jhildenbiddle]

OS theme detection is made possible by the prefers-color-scheme media query:

• https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
• https://caniuse.com/#feat=prefers-color-scheme

Specifying a separate stylesheet for light/dark OS themes can be done as follows:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css" media="(prefers-color-scheme: dark)">

I have made this change to the docsify-themeable site. View it with the latest Safari Technical Preview and toggle your macOS Mohave's light/dark color scheme to see the effect.

FWIW, this solutions is less-than-ideal because it requires both stylesheets to be downloaded, but it makes it very easy to specify separate stylesheets for light and dark color schemes. I could also offer a new stylesheet that contains the CSS custom property values from both the "Simple" and "Simple Dark" themes which would remove the additional stylesheet request and handle all of this automatically, but this approach prevents users from specifying their own light and dark themes. For now, it seems easiest to just recommend the approach above, favoring flexibility over the slight performance hit taken from downloading two stylesheets.

Be aware that while Firefox Nightly supports the prefers-color-scheme media query, it requires a browser restart to detect color scheme changes. A bug has been filed, so hopefully this will be addressed before Firefox 67 is released.

[jrappen]

Related: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example