前端实现切换多套主题

夲奋亻Jay

已于 2024-04-27 09:56:26 修改

阅读量349

点赞数 4

分类专栏： Css Js（Javascript）文章标签：前端 javascript 开发语言

于 2024-04-18 17:27:06 首次发布

本文链接：https://blog.csdn.net/qq_29101285/article/details/137929639

版权

Js（Javascript）同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

Css

11 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root {
            /* 自定义变量
               例如按钮颜色变量：--color-btn
            */
            --color-ul-li: #f5ba63;
        }

        ul {
            /* 
                使用变量var()的方式实现变量变更
            */
            background-color: var(--color-ul-li);
            color: #fff000;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <ul>
        <li onclick="changeTheme('#256dff')">11111111111</li>
        <li onclick="changeTheme('#000000')">22222222222</li>
        <li onclick="changeTheme('#e6e6e6')">33333333333</li>
        <li onclick="changeTheme('#f5ba63')">44444444444</li>
    </ul>
    <script>

        function changeTheme(value) {
        /*
           value多套方案规则切换
           可以通过setProperty的key不用规则方式实现配置不同套主题，来实现所需效果
           let obj = {
            red:{
                '--color-ul-li':'#256dff',
                '--color-btn':'#256dff',
                .....
            },
            green:{
                '--color-ul-li':'#000',
                '--color-btn':'#256dff',
                .....
            }
           }
        */
            document.body.style.setProperty('--color-ul-li', value);
        };
    </script>
</body>

</html>