CSS判断深色模式
使用媒介查询prefers-color-scheme，支持dark，light，no-preference三种模式。
@media (prefers-color-scheme: dark) {
body {
background: #121212;
}
article{
color:rgba(255,255,255,.86);
}
}
JS判断深色模式
使用matchMedia判断是否符合媒介。
返回一个MediaQueryList对象，该对象具有属性matches和media，方法addListener和removeListener。
判断是否支持主题色：
if (window.matchMedia('(prefers-color-scheme)').media === 'not all') {
console.log('Browser doesn\'t support dark mode');
}
判断是否处于深色模式：
if(window.matchMedia('(prefers-color-scheme: dark)').matches){
//...
}
addListener接收一个MediaQueryList对象作为参数。
为深色模式添加监听器，以响应系统切换到或切换出深色模式：
let listeners={
dark:(mediaQueryList )=>{
if(mediaQueryList.matches){
alert('您切换到深色模式了！')
}
},
light:(mediaQueryList)=>{
if(mediaQueryList.matches){
alert('您切换到浅色模式了！')
}
}
}
window.matchMedia('(prefers-color-scheme: dark)').addListener(listeners.dark)
window.matchMedia('(prefers-color-scheme: light)').addListener(listeners.light)
参考资料
prefers-color-scheme - CSS（层叠样式表） | MDN
