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:

@media (prefers-color-scheme: dark) {
    a {
        color: #4be
    }
}

The browser then will respect the OS dark mode or have its own night mode and show your website in dark:

Light mode
Dark mode

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 --force-dark-mode CLI param.
  • Opera here is the best. Choosing light/dark themes in browser will also change the prefers-color-scheme rendering in the fly.