自定义element主题

说明：这里使用的是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);
}