Web页面如何适配系统深色和浅色主题

现在iOS系统Mac系统等都支持了深色主题，那么web页面如何来根据系统主题，来自动适配呢？
其实很简单，这里通过两种方式，来介绍。

# 1、通过媒体查询 prefers-color-scheme

详细文档

示例代码：

// 深色
@media (prefers-color-scheme: dark) {
  body {
    background:  #333; 
    color: white;
  }
}

// 浅色
@media (prefers-color-scheme: light) {
  body {
    background:  #fff; 
    color: #333;
  }
}

// 未知情况
@media (prefers-color-scheme: no-preference) {
  body {
    background:  #fff; 
    color: #333;
  }
}

# 2、通过Window.matchMedia()来判断

详细文档

示例代码：

// 获取MediaQueryList对象
const darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)')

// 是否为深色模式
const isDark = darkMode.matches

// 监听主题切换事件 
darkMode.addEventListener('change', e => { 
  if (e.matches) {
    // 是深色模式，直接在body添加深色class
    document.body.classList.add('dark'); 
  } else { 
    // 非深色模式，删除class
    document.body.classList.remove('dark');  
  } 
});