今日突然发现少数派的网站添加了黑夜模式的主题，而且还可以根据模式来切换，赶紧向它发了技术请教邮件，工程师回复我以下的链接 ：zhih.me/website-dar… 认真阅读了后，再根据自己的一些想法实现了mac等环境下的网页白昼/深夜模式主题自适应，做法很简单
只需要在原来的css加上的媒体查询：prefers-color-scheme
@media (prefers-color-scheme: dark) {
...
}
@media (prefers-color-scheme: light) {
...
}
但是这样的修改成本比较大，如果能在原来的网页上body元素上添加一个class做覆盖最好
window.matchMedia使用 代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<title>主题切换</title>
</head>
<body>
<h1>测试字体</h1>
</body>
<script>
/**
1. 初始化主题
2. 当属性不存在或属性值为light时候 不设置主题
3. 当属性值为dark时候，主题为 dark
**/
// 通过matchMedia查询prefers-color-scheme: dark，返回一个 MediaQueryList 对象，并初始化主题
var mql = matchMedia("(prefers-color-scheme: dark)");
schemeChange(mql)
// 当 prefers-color-scheme发生改变时
mql.onchange = schemeChange;
// 主题切换函数
function schemeChange(event) {
if (event.matches) {
document.body.setAttribute('class', 'theme-dark')
console.log('dark')
} else {
document.body.setAttribute('class', '')
console.log('light')
}
}
</script>
<style>
body.theme-dark {
background-color: #000;
color: #fff;
}
</style>
</html>
最后实现效果：
备注
prefers-color-scheme是CSS3的属性，所以只要浏览器支持该属性，并且系统支持黑暗模式，都可以支持。
