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

Styling External Links with an Icon in CSS

Using a CSS pseudo selector targeting only external links

Self hosting Google Fonts for improved performance

A Hassle-Free Way to Self-Host Google Fonts