Detect System Theme Preference Change Using JavaScript

By  on  

JavaScript and CSS allow users to detect the user theme preference with CSS' prefers-color-scheme media query. It's standard these days to use that preference to show the dark or light theme on a given website. But what if the user changes their preference while using your app?

To detect a system theme preference change using JavaScript, you need to combine matchMedia, prefers-color-scheme, and an event listener:

window.matchMedia('(prefers-color-scheme: dark)')
      .addEventListener('change',({ matches }) => {
  if (matches) {
    console.log("change to dark mode!")
  } else {
    console.log("change to light mode!")
  }
})

The change event of the matchMedia API notifies you when the system preference changes. You can use this event to automatically update the site's display in real time.

I love that this API allows detecting user preference on a system level. Catering to user needs is an important part of creating a great web experience!

Recent Features

  • By
    Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

Incredible Demos

Discussion

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