element-plus主题换色

提示：暂未完善全，仅仅提供思路

主题方式是通过切换主题的方式实现换色，例如blue、green，不推荐，仅参考逻辑。
原因：
1.不好更改element-plus的默认css变量
2.对于我的项目（基于element-plus封装了公司组件库，且引入项目使用），无法将修改好的element-plus的css变量渗透到公司的组件库

推荐使用该链接方式实现换色

---

一、步骤

1.src/style/element.scss

// index.scss
@forward "element-plus/theme-chalk/src/common/var.scss" with ($colors: ("white": #ffffff,"black": #000000,"primary": ("base": #007d7b),"success": ("base": #8bc34a),"warning": ("base": #ffc107),"danger": ("base": #f56c6c),"error": ("base": #ff5722),"info": ("base": #909399))
);
// @use 'element-plus/theme-chalk/dark/css-vars.css'

2.多主题配置
src/style/theme_index.scss

// 基础颜色变量（保留原始配置）
$color-map: (primary: #409eff,success: #67c23a,warning: #e6a23c,danger: #f56c6c,info: #909399,text-primary: #303133,text-regular: #606266,text-secondary: #909399,text-placeholder: #c0c4cc,border-base: #dcdfe6,border-light: #e4e7ed,border-lighter: #ebeef5,border-extra-light: #f2f6fc,background-base: #f5f7fa
);// 基础2
$color-map2: (button-hover-bg-color: red
);// 自定义变量模板（新增）
$custom-vars-template: (chart: (color-1: red,color-2: red)
);// 主题扩展（保留原始+新增自定义）
$themes: (blue: (// 原始Element变量primary: #2e72b1,success: #2bc667,warning: #ffb800,danger: #ff5722,info: #9e9e9e,text-primary: #1f2d3d,text-regular: #324057,border-radius-base: 4px,box-shadow-light: 0 2px 12px 0 rgba(46, 114, 177, 0.1),// 新增自定义变量custom:map-merge($custom-vars-template,(special: (shadow-opacity: blue,highlight-color: #26c6da),my: (color1: #1fff)))),green: (primary: #007d7b,success: #8bc34a,warning: #ffc107,danger: #f44336,info: #607d8b,text-primary: #263238,text-regular: #455a64,text-secondary: #78909c,text-placeholder: #b0bec5,// 绿色主题特有调整border-radius-base: 6px,box-shadow-light: 0 2px 12px 0 rgba(0, 125, 123, 0.1),// 新增自定义变量custom:map-merge($custom-vars-template,(special: (highlight-color: #26c6da),my: (color1: #f1ff))))
);// 生成CSS变量（保留所有功能）
:root {@each $theme, $config in $themes {&[data-theme="#{$theme}"] {// 1. 输出原始Element变量@each $key, $value in map-merge($color-map, $config) {@if $key != "custom" {--el-color-#{$key}: #{$value};}}// 解决不是--el-color的颜色@each $key, $value in map-merge($color-map2, $config) {@if $key != "custom" {--el-#{$key}: #{$value};}}// 2. 保留衍生颜色计算// --el-color-primary-light-3: mix(#f1ff, map-get($config, primary), 30%);// --el-color-primary-light-5: mix(#f1ff, map-get($config, primary), 50%);// --el-color-primary-light-7: mix(#f1ff, map-get($config, primary), 70%);// --el-color-primary-light-9: mix(#f1ff, map-get($config, primary), 90%);// 3. 保留组件变量--el-border-radius-base: #{map-get($config, border-radius-base)};--el-box-shadow-light: #{map-get($config, box-shadow-light)};// 4. 新增自定义变量输出@each $category, $vars in map-get($config, "custom") {@each $name, $value in $vars {@if $value != null {--app-#{$category}-#{$name}: #{$value};}}}}}
}

3.构建配置
vite.config.ts 配置themes和additionalData

 { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue(),Components({dts: false, // 关闭自动生成 components.d.tsdirs: ["src/components"],resolvers: [ElementPlusResolver({importStyle: "sass",themes: ['light', 'dark'] // 关键配置})]}),],css: {preprocessorOptions: {scss: {additionalData: `@use "@/style/element.scss" as *; @use "@/style/theme_index.scss" as *;`}}}
})

4.‌主样式入口文件‌
通常在src/styles/main.scss中引入主题配置：

@use "element-plus/theme-chalk/src/index.scss";
@use "./theme_index.scss" as theme;

5.‌切换控制器
/src/utils/theme.js

export function switchTheme(themeName) {// console.log('%c【' + 'themeName' + '】打印', 'color:#fff;background:#0f0', themeName)// const styleEl = document.createElement('style')// styleEl.id = 'theme-style'// styleEl.textContent = `:root { @include theme-vars(${themeName}); }`// console.log(styleEl.textContent);// const oldStyle = document.getElementById('theme-style')// oldStyle ? document.head.replaceChild(styleEl, oldStyle)//   : document.head.appendChild(styleEl)// console.log('%c【' + 'oldStyle' + '】打印', 'color:#fff;background:#0f0', oldStyle)document.documentElement.setAttribute('data-theme', themeName)
}

6.‌主题切换组件调用‌
在组件中使用切换逻辑：

 <el-button @click="toggleTheme0">{{ currentTheme === "light" ? "暗色模式" : "亮色模式" }}</el-button>import { switchTheme } from '../utils/theme'let themValue = ref('blue')
// 函数
const toggleTheme0 = () => {switchTheme(themValue.value === 'blue' ? 'green' : 'blue') // 调用主题切换方法themValue.value = themValue.value === 'blue' ? 'green' : 'blue'
}

7.main.js初始化主题

document.documentElement.setAttribute('data-theme', 'blue')