web跟随系统暗黑模式

前言

现代的系统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>

效果如下

web跟随系统颜色模式效果演示

总结

本文首先介绍了暗黑模式的css样式, 通过使用css的meida查询器设置系统的样式. 然后介绍了通过js查询系统的暗黑模式状态 , 最后介绍了使用js监听系统模式动态变化事件. 能用js控制自然会发挥js的能力,有了更多的可操控性.

本文作者：wwmin
微信公众号: DotNet技术说
本文链接：https://www.jianshu.com/p/575557eb1465
版权声明：转载请注明出处！
声援博主：如果您觉得文章对您有帮助，关注点赞, 您的鼓励是博主的最大动力！

最后编辑于：2021.11.10 00:18:38