Just finalized the dark theme for the blog. The idea is simple, use
prefers-color-scheme media query and wrap dark style elements with it:
The browser then will respect the OS dark mode or have its own night mode and show your website in dark:
| || |
That's simple and cool!
One of the problems currently is testing. It is possible but rarely comfortable. None of the browsers has mode setting in their dev tools.
Firefox only reads theme status from the operating system. There are some switcher extensions but they don't work properly.
Chrome can be run with
Opera here is the best. Choosing light/dark themes in browser will also change the
prefers-color-schemerendering in the fly.