prefers-color-scheme: CSS Media Query

By  on  

One device and app feature I've come to appreciate is the ability to change between light and dark modes. If you've ever done late night coding or reading, you know how amazing a dark theme can be for preventing eye strain and the headaches that result. macOS recently implemented a native dark mode but that mode doesn't convert websites to a dark interface, so you're still getting a bright site regardless of native theme. Wouldn't it be amazing if websites would also go dark or light based on user's system preference?

The CSS working group agrees, which is why they've created a prefers-color-scheme media query; a media query that signals what the user's theme preference is and allows you to code your site to match that preference!

The prefers-color-scheme media query has two effective values you can specify: light and dark:

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

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

Coupled with your default site design, you could potentially offer three different designs: default (no-preference), light modifications, and dark modifications.

To make managing colors in each mode easier, you can simply modify CSS variables within the media query:

/* Defaults */
:root {
    --color-scheme-background: pink;
    --color-scheme-text-color: red;
}

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

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

/* Usage */
html {
    background: var(--color-scheme-background);
    color: var(--color-scheme-text-color);
}

If you want to use JavaScript to know which mode your user prefers, you can easily do so by getting a CSS variable value:

html {
    content: ""; /* (ab)using the content property */
}

/* Light mode */
@media (prefers-color-scheme: light) {
    html {
        content: "light"; /* (ab)using the content property */
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    html {
        content: "dark"; /* (ab)using the content property */
    }
}
const mode = getComputedStyle(document.documentElement).getPropertyValue('content');

// mode: "dark"

I'm pleased that there's an official media query for color/theme preference. As someone who suffers from minor headaches to skull numbing migraines, my preference is always a dark theme and I appreciate apps that put in the extra effort to provide me a painless user experience. We already use media queries to accommodate print and different viewport sizes, so let's take an extra step in providing colors based on user preference!

Note: At the time of posting, only Safari Preview 68 has implemented this media query. Follow Bugzilla bug 1494034 to know Firefox's support status.

Recent Features

  • By
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

Incredible Demos

  • By
    Facebook-Style Modal Box Using MooTools

    In my oh-so-humble opinion, Facebook's Modal box is the best modal box around. It's lightweight, subtle, and very stylish. I've taken Facebook's imagery and CSS and combined it with MooTools' awesome functionality to duplicate the effect. The Imagery Facebook uses a funky sprite for their modal...

  • By
    dat.gui:  Exceptional JavaScript Interface Controller

    We all love trusted JavaScript frameworks like MooTools, jQuery, and Dojo, but there's a big push toward using focused micro-frameworks for smaller purposes. Of course, there are positives and negatives to using them.  Positives include smaller JS footprint (especially good for mobile) and less cruft, negatives...

Discussion

  1. David S.

    Does window.matchMedia() not work for this?

  2. Timothy Hatcher

    Yes, matchMedia does work. So that would be better than using computed style.

    • Barry K.
      matchMedia('(prefers-color-scheme: dark)').matches
      matchMedia('(prefers-color-scheme: light)').matches
      

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!