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

Resources

• MDN Article