今天逛 github 发现出了一个新功能：
image.png
动态效果：
image.png
可以更改主题模式了，其实更改主题模式也不是什么新鲜功能，有很多网站都有：
image.png
image.png
image.png
image.png
可以看到实现的方式基本就是在浏览器本地存一个数据来标识当前处于什么模式，当然 github 也没有例外：
image.png
那难道本文就完了？
当然没有，这次要讲的是同步系统的主题模式，有没有发现第一张图的下拉框内有一个选项：Sync with system：
image.png
它这里就是同步系统主题的地方，先看下动态效果：
image.png
那它是如何实现的呢？起初我以为是通过 JavaScript 检测一个事件来实现的，进过搜索：
image.png
通过上面两篇文章得知，是使用 @media 的一个属性 prefers-color-scheme 来实现的：
代码语言：javascript复制@media (prefers-color-scheme: dark) { //... }
@media (prefers-color-scheme: light) { //... }我们看一个简单的例子：
代码语言：javascript复制// style
<style>
@media (prefers-color-scheme: dark) {
body { background-color: black; color:white; }
}
@media (prefers-color-scheme: light) {
body { background-color: white; color:black; }
}
</style>// html
<body> 测试 prefers-color-scheme 属性 </body>效果如下：
image.png
那它的兼容性如何？
image.png
image.png
浏览器使用百分比上看全球数据已经90.08%可以支持，但是在中国只有52.46%。但是也不影响使用，只要做好兼容就行。
那我们前面提到的 JavaScript 能检测到吗？浏览器虽然没有直接提供类似：
代码语言：javascript复制window.addEventListener('theme-mode', event =>{
if(event.mode == 'dark'){
}else if(event.mode == 'light'){
}
})但是我们可以通过另一个途径来实现检测主题的变化：
代码语言：javascript复制window.matchMedia('(prefers-color-scheme: dark)') .addEventListener('change', event => {
if (event.matches) {
//dark mode
} else {
//light mode
}
})首先：mqList = window.matchMedia(mediaQueryString) 会返回一个 MediaQueryList 对象，可以通过监听它的 change 事件来得到 matches 属性。matches 为 true 就代表匹配当前的 media，反之则没有。
