我正在使用matchMedia()。addListener来检测Safari中的暗/亮模式主题首选项更改,但是在WebStorm中,使用addListener标记为已弃用,只是说要参考文档来替代它。
我已经通读了MDN文档,但我不明白我应该在addEventListener中侦听哪种事件类型来代替addListener?
window.matchMedia("(prefers-color-scheme: dark)").addListener(() => this.checkNative());
window.matchMedia("(prefers-color-scheme: light)").addListener(() => this.checkNative());
答案 0 :(得分:20)
Chrome和Firefox与Safari的处理方式不同,我通过以下方式解决了该问题:
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);
}
}
如果您对如何在网站中支持暗模式感兴趣,请阅读this blogpost。
答案 1 :(得分:1)
从文档-https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener
表示媒体查询状态更改时要运行的回调函数的函数或函数引用。
应该是change
事件。 https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/onchange。
const mql = window.matchMedia("(prefers-color-scheme: dark)");
mql.addEventListener("change", () => {
this.checkNative();
});