Dark Mode CSS with the prefers-color-scheme media query

prefers-color-scheme is a new-ish CSS media query that lets developers define styles tailored to a visitor's color scheme system setting.

@media (prefers-color-scheme: light|dark|no-preference) { ... }

Picture a webpage with a white background with mostly black text. If a visitor has their operating system's colour scheme set to Dark, a few line of CSS is all that's needed to make the website fall in line.

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

Browser Support

Data on support for the prefers-color-scheme feature across the major browsers from caniuse.com

Resources