Prefers Color Scheme Media Query

Posted: November 19, 2018

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:

Comments

James Clarkson

Thanks for this post. I think it’s worth noting that this requires macOS Mojave (10.14), High Sierra (10.13) doesn’t support dark mode so this media query doesn’t work either.

Leave a Comment

Your email address will not be published. Required fields are marked *