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());
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();
});
TypeError: window.matchMedia("(prefers-color-scheme: dark)").addEventListener is not a function.
What you get in
mql?It's a MediaQueryList as expected
@MattCowley - I do not have much idea about
matchMedia, but the example provided in developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/…window.matchMedia('(max-width: 600px)');works perfectly.Ah, looks like this isn't supported in Safari yet, yet addListener is. How odd...