I can use window.matchMedia
to detect whether user is in dark mode, but how to listen dark mode change event?
Is there any API like:
window.addEventListener('perfers-color-scheme-change', () => {
// do something
})
The prefers-color-scheme CSS media feature is used to detect if the user has requested a light or dark color theme. The user might indicate this preference through an operating system setting (e.g. light or dark mode) or a user agent setting.
As dark mode is reported through a media query, you can easily check if the current browser supports dark mode by checking if the media query prefers-color-scheme matches at all.
You can add an event-listener with callback on the MediaQueryList
returned by Window.matchMedia():
function activateDarkMode() {
// set style to dark
}
// MediaQueryList
const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
// recommended method for newer browsers: specify event-type as first argument
darkModePreference.addEventListener("change", e => e.matches && activateDarkMode());
// deprecated method for backward compatibility
darkModePreference.addListener(e => e.matches && activateDarkMode());
Note: There are two method versions to register an event-listener:
addEventListener("change", listener))
which allows more fine-grained assignment to event-typesaddListener(listener)
Thanks to lukaszpolowczyk for pointing out that method addListener(listener)
has become deprecated and to AsukaSong for initiating a complete rewrite of this answer.
With initialization setter and 'change' listener.
const colorSchemeQueryList = window.matchMedia('(prefers-color-scheme: dark)');
const setColorScheme = e => {
if (e.matches) {
// Dark
console.log('Dark mode')
} else {
// Light
console.log('Light mode')
}
}
setColorScheme(colorSchemeQueryList);
colorSchemeQueryList.addEventListener('change', setColorScheme);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With