Dark Mode for the Web

25 October 2018

The latest version of Safari Technology Preview for macOS adds "prefers-color-scheme" media query support. This allows developers to serve up alternative CSS specifically for light and dark color schemes. I find this an interesting feature, since most web pages look "pale" when visiting with Dark Mode enabled in macOS Mojave.

I played around a bit with this new media query and updated my blog to have a dark color scheme available. To try this out yourself, please visit my website using Safari Technology Preview 68 in macOS Mojave and turn on Dark Mode (under System Preferences > General), or check out the video embedded below.

Technical details

Included below a very simple code snippet which you can use to detect the color scheme preference of the visitor:

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

Update (March 25, 2019)

Dark Mode support is now enabled by default in the new Safari 12.1 release.