前言

现代的系统windows/mocOS/IOS/Android/Linus等等几乎都支持了整个系统的暗黑色主题与亮色主题模式的选择切换, 现代web浏览器自然也都跟随着加入了这一功能. 那么如何将这些功能应用到我们的实际项目中呢?这里就涉及到新的css样式

1. CSS dark样式

 <style type="text/css">
    /* 默认样式 */
    body {
      background-color: white;
      color: black;
    }

    /* 系统支持暗黑模式主题时的样式 */
    @media (prefers-color-scheme: dark) {
      body {
        background-color: black;
        color: white;
      }
    }
  </style>

当系统支持暗黑模式的时候就会应用到@media (prefers-color-scheme: dark)内部的样式

2. JS获取系统模式

如果有独立分开的css样式文件,可使用js判断是否处于暗黑模式,然后再确定加载那个css样式即可, js获取media信息如下

let dom = document.getElementById("mode");
//获取media信息对象
let media = window.matchMedia('(prefers-color-scheme:dark)');
if (media.matches) {
  //可用此方式加载不同的css样式文件,达到自动匹配系统样式功能
  dom.innerText = "监听到模式: 黑暗";
} else {
  dom.innerText = "监听到模式: 亮色";
}

3. 监听系统模式切换

通过监听matchMedia的change事件可判断用户是否切换了暗黑/亮色模式

let media = window.matchMedia('(prefers-color-scheme:dark)');
//监听样式切换
let callback = e => {
  let prefersDarkMode = e.matches;
  if (prefersDarkMode) {
    console.log("黑暗模式");
    dom.innerText = "监听到模式切换: 黑暗";
  } else {
    console.log("亮色模式");
    dom.innerText = "监听到模式切换: 亮色";
  }
}
if (typeof media.addEventListener === 'function') {
  media.addEventListener('change', callback);
} else if (typeof media.addListener === 'function') {
  media.addListener(callback);
}

4. 完整demo

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>web跟随系统颜色模式</title>
</head>

<body>
  <style type="text/css">
    /* 默认样式 */
    body {
      background-color: white;
      color: black;
    }

    /* 系统支持暗黑模式主题时的样式 */
    @media (prefers-color-scheme: dark) {
      body {
        background-color: black;
        color: white;
      }
    }
  </style>
  <div>
    <h3>测试web页面css样式跟随系统颜色模式</h3>
    <h2><span id="mode"></span></h2>
  </div>
  <script>
    let dom = document.getElementById("mode");
    //获取media信息对象
    let media = window.matchMedia('(prefers-color-scheme:dark)');
    if (media.matches) {
      //可用此方式加载不同的css样式文件,达到自动匹配系统样式功能
      dom.innerText = "监听到模式: 暗黑";
    } else {
      dom.innerText = "监听到模式: 亮色";
    }
    //监听样式切换
    let callback = e => {
      let prefersDarkMode = e.matches;
      if (prefersDarkMode) {
        console.log("暗黑模式");
        dom.innerText = "监听到模式切换: 暗黑";
      } else {
        console.log("亮色模式");
        dom.innerText = "监听到模式切换: 亮色";
      }
    }
    if (typeof media.addEventListener === 'function') {
      media.addEventListener('change', callback);
    } else if (typeof media.addListener === 'function') {
      media.addListener(callback);
    }
  </script>
</body>

</html>

效果如下