Add macOS Dark Mode Support to Your Website

27 May 2019 •

Disclaimer: This is an old post. Content may be out of date.

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:

dark
light
no-preference

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

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

Gist on GitHub