prefers-color-scheme 🌗

If you want to see an example of prefers-color-scheme in action, here's a CodePen link.

prefers-color-scheme is a CSS media query that detects the current theme preference of the user's operating system.

@media (prefers-color-scheme: dark) {
  .element {
    background: black;
    color: white;
  }
}

The prefers-color-scheme media query has two values that you can specify: light and dark. These values allow you to customize the theme of the page with CSS depending on the user's preference.

light: Indicates that the user has notified the system that they prefer a page that has a light theme (dark text on light background).

dark: Indicates that the user has notified the system that they prefer a page that has a dark theme (light text on dark background).

/* Light mode */
@media (prefers-color-scheme: light) {
  .element {
    background: white;
    color: black;
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .element {
    background: black;
    color: white;
  }
}

For the scenario where a user has no preference, you can pass no-preference to add a "default" theme to the page.

Browser Support

At the time of writing this post, browser support for prefers-color-scheme sits at 78% with Edge and Opera Mini along with other mobile browsers not supporting the CSS media query.

Resources

• MDN Web Docs: prefers-color-scheme
• Can I Use: prefer-colors-scheme
• prefers-color-scheme: Hello darkness, my old friend
• prefers-color-scheme: CSS Media Query