Dark mode switch icon Light mode switch icon

Add macOS Dark Mode Support to Your Website

1 min read
Old Post
This post is over two years old. 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:

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

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

Gist on GitHub

Originally published on by Lucas Cantor