前端 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]);

  },

};

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

希望本篇文章能帮到你