David O'Reilly

Now supporting “dark mode”

During their “Show Time” event at the end of last month, Apple announced some of their new subscription services, and a refresh to some of their existing line-up. With this, they also pushed out software updates, one of them being the latest version of Safari.

Aside from all the under-the-hood technical wizardry, Safari 12.1 on macOS now includes support for a new stylesheet media query: prefers-color-scheme.


By detecting the user’s system colour scheme preferences (i.e. light or dark), prefers-color-scheme can render different content accordingly. The most obvious use-case is to show either a light or dark colour scheme, in keeping with the recent UI trend, which is exactly what I’m using it for on my blog.

(Try me; open this page in the latest version of Safari on macOS Mojave, then in System Preferences → General, switch Appearance between Light and Dark. Yes, that is indeed witchcraft.)

Usage

With CSS variables, it’s pretty easy to set up two colour schemes, a light and a dark, and use them within a stylesheet. Below is a simplified example of how I’m rendering the two different colour schemes on my blog.

:root {
  /* Default theme */
  --color-body: #515151;
  --color-background: #fff

  @media (prefers-color-scheme: dark) {
    /* Dark theme */
    --color-body: #ccc;
    --color-background: #303030
  }
}

body {
  color: var(--color-body);
  background-color: var(--color-background)
}

Currently, support for prefers-colour-scheme is limited to Safari and Firefox, but as both macOS Mojave, and Windows 10 1607 include system wide colour scheme settings, it’s only a matter of time before Chrome and others adopt the new property.

Who knows, maybe one day we’ll see a “dark mode” Google homepage.


Edit: A “dark mode” Google homepage already exists: Chrome 73 on macOS Mojave features dark mode application support, and with it comes a “dark mode” Google homepage!