前端 Element Plus 简单完美换肤方案

前言：本次新项目中，要求加一个换肤功能，要求可以换任何颜色。通过自己的摸索，总结出一套最合适且比较简单的换肤方案，我分享出来供大家参考，如有更好的方案，大家可以在评论区交流一下。 先看效果：

直接上干货，不废话

原理就是修改主题变量，在根html标签上添加内联样式变量，如图

因为style权重高，会覆盖element plus的颜色变量，这时我们只要选择自己喜欢的颜色替换就行。

我们开发时可以直接使用--el-color-primary颜色主题变量，更改主题的时候，自己的自定义组件也会随着更改，例如：

      li:hover {
        border-color: var(--el-color-primary);
      }

上代码

我去掉了无关代码，方便大家理解

<template>
      <div>主题颜色</div>
      <el-color-picker
        v-model="color"
        @change="colorChange"
        :predefine="predefine"
      />
</template>

<script setup lang="ts">
import { ref } from "vue";
import colorTool from "@/utils/theme"; //引入方法
// 换肤主题
const color = ref<string>("#409eff");
const colorChange = (value: string) => {
  if (value) {
    color.value = value;
  }
  把颜色存到本地，持久化，解决刷新页面主题丢失问题
  localStorage.setItem("COLOR", JSON.stringify(color.value));
  
  设置html标签style样式变量
  document.documentElement.style.setProperty("--el-color-primary", color.value);
  for (let i = 1; i <= 9; i++) {
    document.documentElement.style.setProperty(
      `--el-color-primary-light-${i}`,
      colorTool.lighten(color.value, i / 10)
    );
  }

  //透明
  document.documentElement.style.setProperty(
    `--el-color-primary-light-10`,
    color.value + 15
  );

  for (let i = 1; i <= 9; i++) {
    document.documentElement.style.setProperty(
      `--el-color-primary-dark-${i}`,
      colorTool.darken(color.value, i / 10)
    );
  }
};

if (localStorage.getItem("COLOR")) {
  colorChange(JSON.parse(localStorage.getItem("COLOR") as string));
}
默认颜色板
const predefine = ref<string[]>([
  "#409eff",
  "#009688",
  "#536dfe",
  "#ff5c93",
  "#c62f2f",
  "#fd726d",
]);
</script>

<style scoped lang="scss">
</style>

@/utils/theme文件代码

export default {
  //hex颜色转rgb颜色
  HexToRgb(str: string) {
    str = str.replace("#", "");
    var hxs: any= str.match(/../g);
    for (var i = 0; i < 3; i++) {
        hxs[i] = parseInt(hxs[i], 16)
    }
    return hxs;
  },
  //rgb颜色转hex颜色
  RgbToHex(a:number, b:number, c:number) {
    var hexs = [a.toString(16), b.toString(16), c.toString(16)];
    for (var i = 0; i < 3; i++) {
      if (hexs[i].length == 1) hexs[i] = "0" + hexs[i];
    }
    return "#" + hexs.join("");
  },
  //加深
  darken(color: string, level: number) {
    var rgbc = this.HexToRgb(color);
    for (var i = 0; i < 3; i++) rgbc[i] = Math.floor(rgbc[i] * (1 - level));
    return this.RgbToHex(rgbc[0], rgbc[1], rgbc[2]);
  },
  //变淡
  lighten(color:string, level:number) {
    var rgbc = this.HexToRgb(color);
    for (var i = 0; i < 3; i++)
      rgbc[i] = Math.floor((255 - rgbc[i]) * level + rgbc[i]);
    return this.RgbToHex(rgbc[0], rgbc[1], rgbc[2]);
  },
};

这是现成完整的代码，大家可以直接拿来用。

希望本篇文章能帮到你