修改element-plus主题色

修改element-plus主题色

前提：要安装按需引入和自动导入插件

​npm install -D unplugin-vue-components unplugin-auto-import

---

一、安装插件

npm install -D unplugin-vue-components unplugin-auto-import

具体安装和配置，在第5点

二、新建一个element的覆盖scss文件

@/theme/element-plus-new.scss

// 修改element-plus主题色
@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": #007d7b,
    ),
    "success": (
      "base": #8bc34a,
    ),
    "warning": (
      "base": #ffc107,
    ),
    "danger": (
      "base": #f56c6c,
    ),
    "error": (
      "base": #ff5722,
    ),
    "info": (
      "base": #909399,
    ),
  ),

  $button-padding-horizontal: (
    // "default": 80px
  )
);

三、配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite' // 自动导入vue中hook reactive ref等
import Components from 'unplugin-vue-components/vite' //自动导入ui-组件 比如说ant-design-vue  element-plus等
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' // 对应组件库引入 ，AntDesignVueResolver

// 配置@别名
import { resolve } from "path"

// https://vitejs.dev/config/
export default defineConfig({

    css: {
      preprocessorOptions: {
        scss: {
          // 自动导入定制化样式进行文件覆盖
          additionalData: `@use "@/theme/element-plus-new.scss" as *;`,
        },
      },
    },
  plugins: [
    vue(),

    //element按需导入
    AutoImport({
      resolvers: [ElementPlusResolver()],
      //安装两行后你会发现在组件中不用再导入ref，reactive等
      imports: ['vue', 'vue-router'],
      dts: "src/auto-import.d.ts",
    }),
    Components({
      resolvers: [
        // 配置elementPlus采用sass样式配置系统
        ElementPlusResolver({importStyle:"sass"})
      ],
    }),
  ],

   // ↓解析配置
   resolve: {
    // ↓路径别名
    alias: {
      "@": resolve(__dirname, "./src")
    }
  }
})

四、查看主题色

五、如果设置后无效，可以将@/theme/element-plus-new.scss文件改成下方

即：直接通过 CSS 变量设置

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'black': #333,
    'primary': (
      'base': #007d7b,
    ),
    'success': (
      'base': #8bc34a,
    ),
    'warning': (
      'base': #ffc107,
    ),
    'danger': (
      'base': #f56c6c,
    ),
    'error': (
      'base': #ff5722,
    ),
    'info': (
      'base': #909399,
    ),
  )
);

// 上述主题色设置失败 故采用通过 CSS 变量设置 https://element-plus.org/zh-CN/guide/theming.html#%E9%80%9A%E8%BF%87-css-%E5%8F%98%E9%87%8F%E8%AE%BE%E7%BD%AE
:root {
  --el-color-primary: #007d7b;
  --el-color-success: #8bc34a;
  --el-color-warning: #ffc107;
  --el-color-danger: #f56c6c;
  --el-color-error: #ff5722;
  --el-color-info: #909399;


  color-scheme: light;
  --el-color-white: #ffffff;
  --el-color-black: #333;
  --el-color-primary: #007d7b;
  --el-color-primary-light-3: #4da4a3;
  --el-color-primary-light-5: #80bebd; // hover效果
  --el-color-primary-light-7: #b3d8d7;
  --el-color-primary-light-8: #cce5e5;
  --el-color-primary-light-9: #e6f2f2;
  --el-color-primary-dark-2: #0a6e6d;
  --el-color-success: #8bc34a;
  --el-color-success-light-3: #aed580;
  --el-color-success-light-5: #c5e1a5;
  --el-color-success-light-7: #dcedc9;
  --el-color-success-light-8: #e8f3db;
  --el-color-success-light-9: #f3f9ed;
  --el-color-success-dark-2: #79a645;
  --el-color-warning: #ffc107;
  --el-color-warning-light-3: #ffd451;
  --el-color-warning-light-5: #ffe083;
  --el-color-warning-light-7: #ffecb5;
  --el-color-warning-light-8: #fff3cd;
  --el-color-warning-light-9: #fff9e6;
  --el-color-warning-dark-2: #d6a510;
  --el-color-danger: #f56c6c;
  --el-color-danger-light-3: #f89898;
  --el-color-danger-light-5: #fab6b6;
  --el-color-danger-light-7: #fcd3d3;
  --el-color-danger-light-8: #fde2e2;
  --el-color-danger-light-9: #fef0f0;
  --el-color-danger-dark-2: #ce6161;
  --el-color-error: #ff5722;
  --el-color-error-light-3: #ff8964;
  --el-color-error-light-5: #ffab91;
  --el-color-error-light-7: #ffcdbd;
  --el-color-error-light-8: #ffddd3;
  --el-color-error-light-9: #ffeee9;
  --el-color-error-dark-2: #d65025;
  --el-color-info: #909399;
  --el-color-info-light-3: #b1b3b8;
  --el-color-info-light-5: #c8c9cc;
  --el-color-info-light-7: #dedfe0;
  --el-color-info-light-8: #e9e9eb;
  --el-color-info-light-9: #f4f4f5;
  --el-color-info-dark-2: #7d8085;
  --el-bg-color: #ffffff;
  --el-bg-color-page: #f2f3f5;
  --el-bg-color-overlay: #ffffff;
  --el-text-color-primary: #303133;
  --el-text-color-regular: #606266;
  --el-text-color-secondary: #909399;
  --el-text-color-placeholder: #a8abb2;
  --el-text-color-disabled: #c0c4cc;
  --el-border-color: #dcdfe6;
  --el-border-color-light: #e4e7ed;
  --el-border-color-lighter: #ebeef5;
  --el-border-color-extra-light: #f2f6fc;
  --el-border-color-dark: #d4d7de;
  --el-border-color-darker: #cdd0d6;
  --el-fill-color: #f0f2f5;
  --el-fill-color-light: #f5f7fa;
  --el-fill-color-lighter: #fafafa;
  --el-fill-color-extra-light: #fafcff;
  --el-fill-color-dark: #ebedf0;
  --el-fill-color-darker: #e6e8eb;
  --el-fill-color-blank: #ffffff;
  --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08);
  --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, .12);
  --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, .12);
  --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, .08), 0px 12px 32px rgba(0, 0, 0, .12), 0px 8px 16px -8px rgba(0, 0, 0, .16);
  --el-disabled-bg-color: var(--el-fill-color-light);
  --el-disabled-text-color: var(--el-text-color-placeholder);
  --el-disabled-border-color: var(--el-border-color-light);
  --el-overlay-color: rgba(0, 0, 0, .8);
  --el-overlay-color-light: rgba(0, 0, 0, .7);
  --el-overlay-color-lighter: rgba(0, 0, 0, .5);
  --el-mask-color: rgba(255, 255, 255, .9);
  --el-mask-color-extra-light: rgba(255, 255, 255, .3);
  --el-border-width: 1px;
  --el-border-style: solid;
  --el-border-color-hover: var(--el-text-color-disabled);
  --el-border: var(--el-border-width) var(--el-border-style) var(--el-border-color);
  --el-svg-monochrome-grey: var(--el-border-color);
}

六、补充修改其他组件的主题色

如果也是按照$变量修改无效，那也可以使用:root下的–组件变量class名修改