JavaScript判断系统深色模式

通常使用window.matchMedia进行媒介查询操作，会返回一个MediaQueryList对象，该对象具有属性matches和media，方法addListener和removeListener。

判断是否支持主题色：

if (window.matchMedia('(prefers-color-scheme)').media === 'not all') {
    console.log('浏览器不支持自动切换夜间模式');
}

判断系统当前状态

if(window.matchMedia('(prefers-color-scheme: dark)').matches){
    //深色模式
} else {
    //浅色模式
}

可以通过addListener()监听系统深色模式并作出响应,该方法会接收一个MediaQueryList对象作为参数：

let listeners={
  dark:(mediaQueryList )=>{
    if(mediaQueryList.matches){
      consol.log("当前是深色模式");
    }
  },
  light:(mediaQueryList)=>{
    if(mediaQueryList.matches){
      consol.log("当前是浅色模式");
    }
  }
}

window.matchMedia('(prefers-color-scheme: dark)').addListener(listeners.dark)
window.matchMedia('(prefers-color-scheme: light)').addListener(listeners.light)

CSS判断系统深色模式

css中可以使用prefers-color-scheme进行判断，有lighyt、no-preference、dark三种模式

@media (prefers-color-scheme: dark) { 
  body { 
    background: #121212;
  }
  article{
    color:rgba(255,255,255,.86);
  }
}