This content originally appeared on David Walsh Blog and was authored by David Walsh
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.
This content originally appeared on David Walsh Blog and was authored by David Walsh
David Walsh | Sciencx (2022-10-24T11:16:01+00:00) Detect System Theme Preference Change Using JavaScript. Retrieved from https://www.scien.cx/2022/10/24/detect-system-theme-preference-change-using-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.