javascriptaddeventlistenermatchmedia

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

  • 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();
});