Detect System Theme Preference Change Using JavaScript
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!
![5 Awesome New Mozilla Technologies You’ve Never Heard Of]()
My trip to Mozilla Summit 2013 was incredible. I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out. MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...
![7 Essential JavaScript Functions]()
I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent. Times have changed but there are still a few functions each developer should...
![Image Data URIs with PHP]()
If you troll page markup like me, you've no doubt seen the use of data URI's within image src attributes. Instead of providing a traditional address to the image, the image file data is base64-encoded and stuffed within the src attribute. Doing so saves...
![CSS Rounded Corners]()
The ability to create rounded corners with CSS opens the possibility of subtle design improvements without the need to include images. CSS rounded corners thus save us time in creating images and requests to the server. Today, rounded corners with CSS are supported by all of...
