matchMedia().addListener marked as deprecated, addEventListener equivalent?
I'm making use of matchMedia().addListener
to detect dark/light mode theme preference changes in Safari, however in WebStorm using addListener
is marked as deprecated but simply says to refer to documentation for what should replace it.
I've had a read through the MDN docs and I don't understand what event type I should be listening for in addEventListener
to replace addListener
?
window.matchMedia("(prefers-color-scheme: dark)").addListener(() => this.checkNative());
window.matchMedia("(prefers-color-scheme: light)").addListener(() => this.checkNative());
Solution 1:
From the doc - https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener
A function or function reference representing the callback function you want to run when the media query status changes.
It should be change
event. https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/onchange.
const mql = window.matchMedia("(prefers-color-scheme: dark)");
mql.addEventListener("change", () => {
this.checkNative();
});
Solution 2:
Chrome and Firefox handle it differently than Safari, I solved it with way:
const darkMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
try {
// Chrome & Firefox
darkMediaQuery.addEventListener('change', (e) => {
this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
});
} catch (e1) {
try {
// Safari
darkMediaQuery.addListener((e) => {
this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
});
} catch (e2) {
console.error(e2);
}
}
If you're interested in how to support Dark Mode with your website, read this blogpost.