使用@media (prefers-color-scheme: light){}和@media (prefers-color-scheme: dark){}实现主题的切换

weixin_47389477

于 2024-06-04 15:00:14 发布

阅读量302

点赞数 1

分类专栏：笔记文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/weixin_47389477/article/details/139443256

版权

笔记专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!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;
            --color-accent: #ba0d37;
            --white-color-background: #fff;
            /* color-scheme: light dark; */
            --color:#000000;
        }
        * {
            margin: 0;
            padding: 0;
        }
        body {
            text-align: center;
            height: 100vh;
        }
        .data-light {
          background: var(--white-color-background);
          --color-background: #fff;
            color: var(--color-text-default);
            --color:pink;
            --color-text:rgb(148, 214, 35);
        }
        .data-dark {
          background: var(--color-background);
          --color-background: #1b1b1b;
            color: white;
            --color:#ba0d37;
            --color-text:skyblue;
        }
        h2 {
            margin: 50px auto;
            color: var(--color-accent)
        }

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

        @media (prefers-color-scheme: light) {
            /* body {
                background-color: var(--color-background);
            } */
            h1,h2{
              color:var(--color)
            }
            .scheme-tip{
              color:var(--color-text);
            }
        }
        .tab-type {
            display: flex;
            justify-content: center;
            padding-top: 30px;
        }
        .tab-type > li {
            cursor: pointer;
            color: #fff;
            background-color: lightsalmon;
            border-radius: 12px;
            padding: 5px;
            margin: 0px 20px;
            max-width: 300px;
            list-style: none;
        }
</style>
</head>

<body>
    <div class="content" id="content">
      <h1>nihao</h1>
        <ul class="tab-type">
            <li id="light">浅色主题</li>
            <li id="dark">暗色主题</li>
        </ul>
        <h2>主题控制</h2>
        <div class="scheme-tip"></div>
    </div>
    <script>
        // 手动修改主题颜色
        const light = document.getElementById('light')
        const dark = document.getElementById('dark')
        const content = document.getElementsByTagName('body')[0]
        const tipText = document.getElementsByClassName('scheme-tip')[0]
        let lightTip = '当前自定义主题：light亮色', darkTip = '当前自定义主题：dark暗色'

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

        // js 监听系统主题模式,初始化的时候确定是亮色还是暗夜主题
        const scheme = window.matchMedia('(prefers-color-scheme: dark)')
        if (scheme.matches) {
            // 深色模式业务处理代码
            console.log('深色模式');
            tipText.innerHTML = darkTip
        } else {
            // 浅色模式业务处理代码
            console.log('浅色模式');
            tipText.innerHTML = lightTip
        }
</script>
</body>
</html>

亮色主题