Prefers Color Scheme Media Query

Posted on

Safari’s latest Technology Preview release brings with it support for the prefers-color-scheme media query, which many think of as ‘enabling dark mode’, but it can also work if the user prefers a light color scheme.

The theme for this blog is dark by default, but I’ve now added a light color scheme.

@media (prefers-color-scheme: light) {
  body {
    background-color: #eee;
    color: #666;
  }
}

For more info check the official spec .

Track implementation progress with other browsers here:

You might also like

Bootstrap 5 Print Stylesheet

Optimized CSS for printing