Gary Blackwood

Dark Mode Preference Detection

If you’re anything like me, you always enable the dark mode within your operating system and applications. Did you know that there is a media query that allows you to query whether a user prefers dark mode?

The prefers-color-scheme CSS media feature can be used to detect whether a user has requested a light or dark theme. In combination with CSS variables, this allows us to support dynamically switching between multiple themes.

/* No preference */
:root {
  --fg-color: white;
  --bg-color: black;
}

/* The dark theme is preferred */
@media (prefers-color-scheme: dark) {
  :root {
    --fg-color: white;
    --bg-color: black;
  }
}

/* The light theme is preferred */
@media (prefers-color-scheme: light) {
  :root {
    --fg-color: black;
    --bg-color: white;
  }
}

It is also possible to query this preference using JavaScript using window.matchMedia():

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  console.log('Dark mode rocks 🎉');
}

The window.matchMedia function returns a MediaQueryList object that allows us to react to media change events:

const media = window.matchMedia('(prefers-color-scheme: dark)');
media.addListener((e) => {
  console.log(`Dark mode is ${e.matches ? 'on' : 'off'}`);
});

At the time of writing, other than Opera Mini, this feature is supported in all major modern browsers. Check out caniuse.com for a comprehensive list.