Add macOS Dark Mode Support to Your Website

2019-May-27

I finally got around to adding support for macOS dark mode in my site’s CSS while working on consolidating the style between my main site and my blog.

It’s surprisingly easy to do via the prefers-color-scheme query, which supports the following values:

For example, the CSS I’ve added for my site:

@media (prefers-color-scheme: dark) {
  body {
    color: #ddd;
    background-color: #222;
  }
}

Gist on GitHub