vue css变量实现多主题皮肤切换

实现方式

多主题皮肤切换有很多种实现方式，可以用css预处理器实现、可以用js实现，其实最简单的一种方式是用css变量（CSS Variable）来实现

在单页应用中，我们通过设置body的css变量来控制整个系统的主题色，body添加一个属性theme-mode,该属性值用来表示当前页面主题皮肤，切换主题时更新theme-mode更新dom以此实现系统的主题皮肤切换。
也可以在body中定义class内再设置主题变量，实现对组件模块的主题定制
创建主题变量配置文件，不同的主题创建设置不同的theme-mode值就好了

/* 墨绿色主题 */
:root {
  body[theme-mode="green"] {
    /* 全局主题颜色 */
    --theme-text-color: #217346;
    --theme-border-color: #a6c7b5;
    --theme-hover-color: #e9f1ed;
    --bg-color: #217346;
    --bg-color-sub: #15663a;
    --act-color: #fff;
    --bg-color-act: #439567;

    /* 左侧导航菜单 */
    .menu-bg-left {
      --active-bg-color: #217346;
    }   
  }
}

实时切换主题页面刷新

div中使用了主题颜色background:var(--bg-color)，后续开发在style中调用上述主题配置中的css变量就好啦

<el-select v-model="value" placeholder="切换主题" @change="changeTheme">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
<div style="height:400px;
                width:300px;
                background:var(--bg-color);
                border: 1px solid red;
            " 
     class="theme-bg"
>
</div>

切换主题触发改变body的theme-mode值

const changeTheme = (v) => {
    document.body.setAttribute('theme-mode', v)
}

这个时候就通过css变量实现了在用户切换主题时改变系统的主题皮肤，可以发现css可以支持高度定制主题，后续还能将主题配置文件开放出来单独设置配置文件来生成不同的系统皮肤

如果是用了element-ui组件如何设置组件的主题色统一成我们这个方案呢

我们发现element-ui也是用css变量实现的主题，所以我们只需要根据我们的主题配置文件改变element-ui组件的css默认变量值就好了。
下面的是element-ui的主题变量，我们在不同的主题文件中设置成我们需要的主题色就能实现了

{
    --el-color-primary: #217346;
    --el-color-primary-rgb: 33, 115, 70;
    --el-color-primary-light-1: #378159;
    --el-color-primary-light-2: #4d8f6b;
    --el-color-primary-light-3: #649d7e;
    --el-color-primary-light-4: #7aab90;
    --el-color-primary-light-5: #90b9a3;
    --el-color-primary-light-6: #a6c7b5;
    --el-color-primary-light-7: #bcd5c8;
    --el-color-primary-light-8: #d3e3da;
    --el-color-primary-light-9: #e9f1ed;
    --el-color-primary-dark-2: #1a5c38;
}