Blog

For users who prefer a dark interface, whether for aesthetics or to avoid eye strain, each application or each website could offer, with more or less simple mechanisms, a choice of color tint for the user interface or the content.

Photoshop offers this feature since many years directly in its preferences, even offering several shades.

Some websites offer one or more versions with a simple click of a mouse. This improves the accessibility of those sites by offering different contrasts that readers can activate according to their needs.

Some operating systems offer the possibility to change the whole theme. But this was not the case for the macOS. Apple even blocked external tools to prevent any changes to the visual, and this, up to recently. With macOS 10.14, Apple has finally launched the “Dark Mode”, which can be enabled or not, with a simple mouse click.

But what happens to the dark mode for the websites content? Apple now gives to developers a new media query:

@media (prefers-color-scheme:dark)

In the same way as any other media selector, we can then define a regular version of the colors and a dark version:

:root {
  background-color: #fff;
}

@media (prefers-color-scheme:dark) {
  :root {
    background-color: #050505;
  }
}

Référence :
https://webkit.org/blog/8475/release-notes-for-safari-technology-preview-68/