CSS和JS判断深色模式

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

Window.matchMedia() - Web API 接口参考 | MDN

MediaQueryList - Web API 接口参考 | MDN