element-plus 一键动态换任何皮肤功能

plus 官方代码给的思路
如果您想要通过 js 控制 css 变量，可以这样做：

// document.documentElement 是全局变量时
const el = document.documentElement
// const el = document.getElementById('xxx')// 获取 css 变量
getComputedStyle(el).getPropertyValue(`--el-color-primary`)// 设置 css 变量
el.style.setProperty('--el-color-primary', 'red')

但是你发现这样做之后，只是表面上换了个皮肤，像其它的操作，比如按钮hover,disabled 等的状态还是默认的颜色，就让你很不爽!

动态计算替换变量解决此问题

安装插件 color

pnpm add color

实现思路就是把所有的主色变量替换掉, 几行代码搞定

<template><el-button type="primary" class="btn" size="default" @click="">Hello</el-button><el-tag>Tag 1</el-tag><el-color-pickerv-model="color"show-alphasize="large":predefine="predefineColors"@change="changeTheme"/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Color from 'color'
const color = ref('#f00')
const predefineColors = ref(['#ff4500', '#ff8c00', '#ffd700', '#90ee90'])
function changeTheme() {const el = document.documentElementel.style.setProperty('--el-color-primary', color.value)el.style.setProperty('--el-color-primary-dark-2', color.value)for (let i = 1; i < 10; i++) {el.style.setProperty(`--el-color-primary-light-${i}`,Color(color.value).alpha(`${(1 - i * 0.1).toFixed(1)}`))}
}
changeTheme()
</script>
<style scoped></style>