element-plus主题换色

提示本篇暂未完善全仅仅提供思路具体的实现可以参考我这篇文章验证可行推荐使用该链接方式实现换色主题方式是通过切换主题的方式实现换色例如blue、green不推荐仅参考逻辑。原因1.不好更改element-plus的默认css变量2.对于我的项目基于element-plus封装了公司组件库且引入项目使用无法将修改好的element-plus的css变量渗透到公司的组件库文章目录一、步骤一、步骤1.src/style/element.scss// index.scssforwardelement-plus/theme-chalk/src/common/var.scsswith($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.css2.多主题配置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}fromviteimportvuefromvitejs/plugin-vueexportdefaultdefineConfig({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中引入主题配置useelement-plus/theme-chalk/src/index.scss;use./theme_index.scssastheme;5.‌切换控制器/src/utils/theme.jsexportfunctionswitchTheme(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 clicktoggleTheme0{{currentThemelight?暗色模式:亮色模式}}/el-buttonimport{switchTheme}from../utils/themeletthemValueref(blue)// 函数consttoggleTheme0(){switchTheme(themValue.valueblue?green:blue)// 调用主题切换方法themValue.valuethemValue.valueblue?green:blue}7.main.js初始化主题document.documentElement.setAttribute(data-theme,blue)