说明：这里使用的是vue3做的demo，所以使用的是element-plus，不同版本大同小异

一、安装element-plus

npm install element-plus --save

二、在main.ts中引入

import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
app.use(ElementPlus);

三、使用组件

现在可以在页面正常使用，展示默认样式

四、在src目录下创建styles存放样式

// styles/element/index.scss
@forward "element-plus/theme-chalk/src/common/var.scss" with ($colors: ("white": #ffffff,"black": #000000,"primary": (// 'base': #409eff,"base": #e6a23c,),"success": ("base": #67c23a,),"warning": ("base": #e6a23c,),"danger": ("base": #f56c6c,),"error": ("base": #f56c6c,),"info": ("base": #909399,),)
);
// @use "element-plus/theme-chalk/src/index.scss" as *; //官网给的这行要注释掉

五、修改配置项

第一步：安装依赖

npm i unplugin-auto-import unplugin-vue-components

第二步：修改配置

plugins: [vue(),Components({resolvers: [ElementPlusResolver({importStyle: "sass",}),],}),AutoImport({resolvers: [ElementPlusResolver({importStyle: "sass",}),],}),],css: {preprocessorOptions: {scss: {additionalData: `@use "@/styles/element/index.scss" as *;`,},},},

注意点： 因为在配置项中进行了css配置，所以创建的styles/element/index.scss文件不需要再手动引入到main.ts中了，重复引入则会报错

六、此时对elementUI的主题修改就完成了

七、如需进行自由切换主题则需要额外的操作

一、创建一个theme.js的文件专门存放切换主题的方法

//theme.js
// 处理主题样式
export function handleThemeStyle(theme) {document.documentElement.style.setProperty('--el-color-primary', theme)for (let i = 1; i <= 9; i++) {document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, `${getLightColor(theme, i / 10)}`)}for (let i = 1; i <= 9; i++) {document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, `${getDarkColor(theme, i / 10)}`)}
}// hex颜色转rgb颜色
export function hexToRgb(str) {str = str.replace('#', '')let hexs = str.match(/../g)for (let i = 0; i < 3; i++) {hexs[i] = parseInt(hexs[i], 16)}return hexs
}// rgb颜色转Hex颜色
export function rgbToHex(r, g, b) {let hexs = [r.toString(16), g.toString(16), b.toString(16)]for (let i = 0; i < 3; i++) {if (hexs[i].length == 1) {hexs[i] = `0${hexs[i]}`}}return `#${hexs.join('')}`
}// 变浅颜色值
export function getLightColor(color, level) {let rgb = hexToRgb(color)for (let i = 0; i < 3; i++) {rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i])}return rgbToHex(rgb[0], rgb[1], rgb[2])
}// 变深颜色值
export function getDarkColor(color, level) {let rgb = hexToRgb(color)for (let i = 0; i < 3; i++) {rgb[i] = Math.floor(rgb[i] * (1 - level))}return rgbToHex(rgb[0], rgb[1], rgb[2])
}

二、引入使用

import { handleThemeStyle } from './theme.js'
onMounted(() => {nextTick(() => {// 初始化主题样式handleThemeStyle('#36ddf8')})
})

三、补充说明：如果同时要为自己写的组件进行主题切换，可以给你的组件添加一个自定义样式

.title {background: var(--el-color-primary-light-4);
}

如果想要自定义自己的类名

//定义
document.documentElement.style.setProperty("--zq-color--primary","#dd952f");
//使用
.title {background: var(--zq-color--primary);
}