How to use dark mode in CSS with MacOS Mojave?

Question

MacOS Mojave has been recently released with the Dark Mode option.

Is there a way to use it in web apps, with CSS?

Answer 1

Use prefers-color-scheme media query:

/* Text and background color for light mode */
body {
  color: #333;
}

/* Text and background color for dark mode */
@media (prefers-color-scheme: dark) {
  body {
    color: #ddd;
    background-color: #222;
  }
}

The prefers-color-scheme query supports three values: dark, light, and no-preference.

No polyfills are required, the media query code would be skipped if your browser doesn’t support it.

Note: It is supported in Safari 12.1 and Safari Tech Preview 68. Safari 12 that ships with Mojave does not support the media query.

iOS, Chrome and Firefox don't support Dark Mode as of Oct 2018.