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:02px 12px0rgba(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:02px 12px0rgba(0,125,123,0.1),// 新增自定义变量custom:map-merge($custom-vars-template,(special:(highlight-color:#26c6da),my:(color1:#f1ff)))));// 生成CSS变量（保留所有功能）:root{@each $theme,$configin$themes{&[data-theme="#{$theme}"]{// 1. 输出原始Element变量@each $key,$valueinmap-merge($color-map,$config){@if$key!="custom"{--el-color-#{$key}:#{$value};}}// 解决不是--el-color的颜色@each $key,$valueinmap-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,$varsinmap-get($config,"custom"){@each $name,$valuein$vars{@if$value!=null{--app-#{$category}-#{$name}:#{$value};}}}}}}

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

{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'exportdefaultdefineConfig({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"astheme;

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

exportfunctionswitchTheme(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'letthemValue=ref('blue')// 函数consttoggleTheme0=()=>{switchTheme(themValue.value==='blue'?'green':'blue')// 调用主题切换方法themValue.value=themValue.value==='blue'?'green':'blue'}

7.main.js初始化主题

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