MacOS Mojave has been recently released with the Dark Mode option.
The option allows you to enable dark interface through all the system, which is very useful while working in the evenings and nights. Native apps are able to take advantage of the mode by following the interface guidelines.
What about web apps? The good news is: Safari 12.1, Chrome 73 and Firefox 67 support Dark Mode! The CSS itself is very simple:
/* 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.
To use it in JS, window.matchMedia('(prefers-color-scheme: dark)') would do the trick. No polyfills are required, the CSS/JS code would be skipped if your browser doesn’t support it.
For the demo, open this site in Safari, Chrome or Firefox with MacOS Dark Mode enabled. iOS would probably also get a dark mode in the next major update.