前端自定义主题色（动态修改主题色实现换肤）

在项目的主题色进行动态修改需求来源于：不同的角色进入网页定义不同的主题色

要点：使用css原生的变量如 --mainColor 使用时候var(--mainColor)

思路如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主题色切换</title>
    <style>
        body {
            --mainColor: red;
        }
        .box {
            background-color: var(--mainColor);
            height: 500px;
            width: 500px;
        }
        #color {
            height: 200px;
            width: 200px;
        }
        .big_box {
            display: flex;
            justify-content: space-evenly;
        }
    </style>
</head>

<body>
    <div class="big_box">
        <div class="box">
        </div>
        <div class="box2">
            <xy-color-picker id="color" defaultvalue="rgb(66, 185, 131)" onchange="getColor(this.value)">
            </xy-color-picker>
        </div>
    </div>
    <!-- 引入颜色选择器 -->
    <script type="module" src="https://unpkg.com/xy-ui/components/xy-color-picker.js"></script>
    <script>
        let getColor = function (color) {
            // 获取到当前选中的color  并赋值给颜色变量
            document.body.style.setProperty('--mainColor', color);
        }
    </script>
</body>
</html>

仅仅是实现思路效果图：