在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);
  }
}

如果每个选择器都要写@media，还是有点麻烦。
结合CSS自定义变量，可以在匹配到目标媒介的时候自动修改变量值。

:root{
  --card-bg-color: #ffffff;
  --text-color: #606060;
}

@media (prefers-color-scheme: dark) {
  :root{
  --card-bg-color: #1e1e1e;
  --text-color: #c0c0c0;
  }
}

.card{
  background-color: var(--card-bg-color);
}

.some-else-block{
  color: var(--text-color);
}

在小程序中，使用page标签代替:root。

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)

在微信小程序中没有window对象，如何获取和监听系统主题，详情请看DarkMode 适配指南 | 微信开放文档

设计规范

参考设计规范：
Material Design的Dark Theme设计规范
iOS的Dark Mode设计规范

参考资料

网站如何支持黑暗模式 - 码路 - SegmentFault 思否