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!

The post Detect System Theme Preference Change Using JavaScript appeared first on David Walsh Blog.

David Walsh Blog