CSS媒体查询@media (prefers-color-scheme:dark)判断系统白天黑夜模式

最新推荐文章于 2024-06-04 15:00:14 发布

shenzhipeng1023

最新推荐文章于 2024-06-04 15:00:14 发布

阅读量2.8k

点赞数 3

文章标签： h5实现黑夜模式 h5监听黑夜模式方法 js监听黑夜模式方法

本文链接：https://blog.csdn.net/jason_renyu/article/details/129306381

版权

前言

在最近学习中突然看到了在媒体查询中prefers-color-scheme:dark监听的使用，然后就模仿里边写了个简单例子，代码如下：

	body {
      background-color: #f5f5f5;
    }
    @media (prefers-color-scheme: dark) {
      body {
        background-color: #666;
      }
    }

然后通过修改系统的黑天白夜/浅色深色模式, body的背景色也跟着响应的变动了，这个跟现在各APP推出黑夜模式以及随系统改变白天白夜模式的功能息息相关啊，感觉到了这个属性的重要性就在caniuse中查了一下，不出所料咱们的老朋友IE仍不支持，不过对于移动端的小伙伴来说已经够用了。
在这里插入图片描述
然后根据查询到的资料整理了一个demo，有需要的朋友可以复制下来到运行一下看效果，要注意在页面中手动设置light和dark后需要清除或者刷新页面，不然body的变化会使得系统的变化体现不出来

<!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>系统的主题色设置为亮色或者暗色</title>
  <style lang="css">
    /* 整个页面配置为使用用户的配色方案首选项 */
    /* 根元素，优先级最高，与html选择器相同 */
    :root {
      --color-background: #1b1b1b;
      --color-border: #cacfd5;
      --color-text-default: #0b1016;
      --color-base: #f4f5f6;
      --white-color-background: #fff;
      color-scheme: light dark;
    }

    * {
      margin: 0;
      padding: 0;
    }

    body {
      text-align: center;
      height: 100vh;
    }

    .light-scheme {
      background: var(--white-color-background);
      color: var(--color-text-default);
    }

    .dark-scheme {
      background: var(--color-background);
      color: white;
    }

    /* 监听操作系统主题模式 */
    @media (prefers-color-scheme: dark) {
      body {
        background-color: var(--color-background);
      }
    }

    @media (prefers-color-scheme: light) {
      body {
        background-color: var(--white-color-background);
      }
    }

    .tab-type {
      display: flex;
      justify-content: center;
      padding-top: 30px;
    }

    .tab-type>li {
      list-style: none;
      cursor: pointer;
      color: #fff;
      background-color: rgb(33, 139, 216);
      border-radius: 12px;
      padding: 10px;
      margin: 0px 20px;
      text-align: center;
    }

    #schemeTip {
      line-height: 50px;
    }
  </style>
</head>

<body>
  <div class="content" id="content">
    <ul class="tab-type">
      <li id="light">浅色主题</li>
      <li id="dark">暗色主题</li>
      <li id="resetEffect">清除手动设置的影响</li>
    </ul>
    <h3 id="schemeTip"></h3>
  </div>
  <script>
    // 手动修改主题颜色
    const light = document.getElementById('light')
    const dark = document.getElementById('dark')
    const resetEffect = document.getElementById('resetEffect')
    const content = document.body
    const tipText = document.getElementById('schemeTip')

    let lightTip = '当前自定义主题：light亮色', darkTip = '当前自定义主题：dark暗色'

    light.onclick = () => {
      content.setAttribute('class', 'light-scheme')
      tipText.innerHTML = lightTip
    }
    dark.onclick = () => {
      content.setAttribute('class', 'dark-scheme')
      tipText.innerHTML = darkTip
    }

    // 清除设置后不影响系统变化的效果
    resetEffect.onclick = () => {
      content.setAttribute('class', '')
      // 默认亮色
      tipText.innerHTML = lightTip
    }
    // js 监听系统主题模式，这个属性为js加载时候获取，目前还没有js监听的原生方法，如果后期有改动请留言
    const scheme = window.matchMedia('(prefers-color-scheme: dark)')
    console.log('系统主题变化', scheme)
    if (scheme.matches) {
      // 深色模式业务处理代码
      console.log('深色模式');
      tipText.innerHTML = darkTip
    } else {
      // 浅色模式业务处理代码
      console.log('浅色模式');
      tipText.innerHTML = lightTip
    }
  </script>
</body>

</html>