检测黑暗模式，并使用JavaScript检测模式变化
使用CSS，我们可以使用prefers-color-scheme media query来检测黑暗模式。
但是......如果我们必须使用JavaScript呢？我最近偶然发现了这个问题，因为我有一些JavaScript代码，在页面上添加了一张图片，但我想根据明/暗模式显示不同的图片。
下面是我们如何做的
首先，检测matchMedia 对象是否存在（否则浏览器不支持黑暗模式，你可以退回到光明模式）。
然后，检查它是否是黑暗模式，使用
window.matchMedia('(prefers-color-scheme: dark)').matches
这将返回true ，如果黑暗模式被启用。
这里有一个完整的例子，如果是深色模式，我就把图片的颜色反转。
const img = document.querySelector('#myimage')
if (window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches) {
img.style.filter="invert(100%)";
}
但有一个问题：如果用户在使用我们的网站时改变了模式怎么办？
我们可以使用一个事件监听器来检测模式的改变，像这样。
window.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', event => {
if (event.matches) {
//dark mode
} else {
//light mode
}
})
