vue3+element-plus 主题色更换

前言

在后台项目的开发中，有更换主题色的需求，结合项目总结了几种常用的方式

方法

一、通过覆盖scss变量

// styles/element/index.scss
/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #56AB2F,
    ),
  ),
);

// 如果你想导入所有样式:
@use "element-plus/theme-chalk/src/index.scss" as *;

// vue.config.js
{
  ...,
  css: {
    loaderOptions: {
      scss: {
        sassOptions: {
          outputStyle: "expanded"
        },
        prependData: `@import "@/styles/element.scss";` //在这里全局引入
      }
    }
  }
 } 

二、App.vue中加入如下代码

<script setup>
import { onMounted } from 'vue'
 
onMounted(() => {
  document.body.style.setProperty('--el-color-primary', '#56AB2F');
  document.body.style.setProperty('--el-color-primary-light-9', '#F5FBF0');
  document.body.style.setProperty('--el-color-primary-light-3', '#95d475');
})
</script>

三、通过element-theme 生成一套css拷贝到项目中，引入该css实现主题颜色的切换

// 1. 全局安装 element-theme
npm i element-theme
// 2. 安装chalk主题
npm i element-theme-chalk -D
// 3. 初始化变量文件
et -i //默认输出到element-variabless.scss
$--color-primary:#56AB2F!default // 修改主题颜色
// 4. 编译主题
et
// 5. 在main.js中引入
import '@/theme/index.css'

参考链接

element-plus.gitee.io/zh-CN/guide…