如何在javascript中检测首选颜色方案的更改？

我可以使用

window.matchMedia

检测用户是否处于暗模式，但如何监听暗模式更改事件

是否有类似以下的API：

window.addEventListener（'perfer-color-scheme-change'，（）=>{
//做点什么
})

您可以通过调用以下人员返回的

MediaQueryList来添加：

函数activateDarkMode（）{
//将样式设置为深色
}
window.matchMedia（（首选颜色方案：深色）”）.addListener(
e=>e.matches&&activateDarkMode（）//侦听器
);

请参阅这篇关于如何操作的文章

注册侦听器的更新版本
上面的方法
addListener（listener）
已被弃用，但仍可用作较新版本的别名。
（感谢您指出！）
带有初始化设置器和“更改”侦听器

let 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.addListener(setColorScheme);

您只需使用此处指定的
matchMedia
，当前版本：
window.matchMedia（（首选配色方案：深色）”）.addEventListener（“更改”，e=>e.matches&&activateDarkMode（））@lukaszpolowczyk谢谢你的提示。感谢您，希望此添加内容正确反映您的评论