vue3-ElementPlus换肤功能

动态换肤实现方式，在scss或者less中，通过定义css变量。依赖于该css变量的值的dom，会随这css变量值的改变而改变。

需要注意

1、组件库的主题 2、非组件库的主题

新建ThemeDrawer组件

无论是Drawer抽屉式组件还是弹出层，其效果一样。不重要，重要的是实现方式

<template>
	<el-drawer v-model="drawerVisible" title="布局设置" size="300px">
		<div class="theme-item">
			<span>主题颜色</span>
			<el-color-picker v-model="themeConfig.primary" :predefine="colorList" @change="changePrimary" />
		</div>
		<div class="theme-item">
			<span>暗黑模式</span>
			<SwitchDark></SwitchDark>
		</div>
		<div class="theme-item">
			<span>灰色模式</span>
			<el-switch v-model="themeConfig.isGrey" @change="changeGreyOrWeak($event, 'grey')" />
		</div>
		<div class="theme-item">
			<span>色弱模式</span>
			<el-switch v-model="themeConfig.isWeak" @change="changeGreyOrWeak($event, 'weak')" />
		</div>
		<br />
	</el-drawer>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { useTheme } from "@/hooks/useTheme";   
import mittBus from "@/utils/mittBus";
import { GlobalStore } from "@/stores";
import { DEFAULT_PRIMARY } from "@/config/config";  // * 默认主题颜色 export const DEFAULT_PRIMARY: string = "#009688";
import SwitchDark from "@/components/SwitchDark/index.vue";

const { changePrimary, changeGreyOrWeak } = useTheme();

// 预定义主题颜色
const colorList = [
	DEFAULT_PRIMARY,
	"#DAA96E",
	"#0C819F",
	"#409EFF",
	"#27ae60",
	"#ff5c93",
	"#e74c3c",
	"#fd726d",
	"#f39c12",
	"#9b59b6"
];

const drawerVisible = ref(false);
const globalStore = GlobalStore();
const themeConfig = computed(() => globalStore.themeConfig);

mittBus.on("openThemeDrawer", () => (drawerVisible.value = true));
</script>

<style lang="scss" scoped>
.theme-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 14px 0;
	span {
		font-size: 14px;
	}
}
</style>

import { computed, onBeforeMount } from "vue";
import { getLightColor, getDarkColor } from "@/utils/theme/tool";
import { GlobalStore } from "@/stores";
import { DEFAULT_PRIMARY } from "@/config/config";
import { ElMessage } from "element-plus";

/**
 * @description 切换主题
 * */
export const useTheme = () => {
	const globalStore = GlobalStore();
	const themeConfig = computed(() => globalStore.themeConfig);

	// 切换暗黑模式
	const switchDark = () => {
		const body = document.documentElement as HTMLElement;
		if (themeConfig.value.isDark) body.setAttribute("class", "dark");
		else body.setAttribute("class", "");
		changePrimary(themeConfig.value.primary);
	};

	// 修改主题颜色
	const changePrimary = (val: string) => {
		if (!val) {
			val = DEFAULT_PRIMARY;
			ElMessage({ type: "success", message: `主题颜色已重置为 ${DEFAULT_PRIMARY}` });
		}
		globalStore.setThemeConfig({ ...themeConfig.value, primary: val });
		// 为了兼容暗黑模式下主题颜色也正常，以下方法计算主题颜色 由深到浅 的具体颜色
		document.documentElement.style.setProperty("--el-color-primary", themeConfig.value.primary);
		document.documentElement.style.setProperty(
			"--el-color-primary-dark-2",
			themeConfig.value.isDark
				? `${getLightColor(themeConfig.value.primary, 0.2)}`
				: `${getDarkColor(themeConfig.value.primary, 0.3)}`
		);
		// 颜色加深或变浅
		for (let i = 1; i <= 9; i++) {
			document.documentElement.style.setProperty(
				`--el-color-primary-light-${i}`,
				themeConfig.value.isDark
					? `${getDarkColor(themeConfig.value.primary, i / 10)}`
					: `${getLightColor(themeConfig.value.primary, i / 10)}`
			);
		}
	};

	// 灰色和弱色切换
	const changeGreyOrWeak = (value: boolean, type: string) => {
		const body = document.body as HTMLElement;
		if (!value) return body.setAttribute("style", "");
		if (type === "grey") body.setAttribute("style", "filter: grayscale(1)");
		if (type === "weak") body.setAttribute("style", "filter: invert(80%)");
		let propName = type == "grey" ? "isWeak" : "isGrey";
		globalStore.setThemeConfig({ ...themeConfig.value, [propName]: false });
	};

	onBeforeMount(() => {
		switchDark();
		changePrimary(themeConfig.value.primary);
		if (themeConfig.value.isGrey) changeGreyOrWeak(true, "grey");
		if (themeConfig.value.isWeak) changeGreyOrWeak(true, "weak");
	});

	return {
		switchDark,
		changePrimary,
		changeGreyOrWeak
	};
};

import { ElMessage } from "element-plus";

/**
 * hex颜色转rgb颜色
 * @param str 颜色值字符串
 * @returns 返回处理后的颜色值
 */
export function hexToRgb(str: any) {
	let hexs: any = "";
	let reg = /^\#?[0-9A-Fa-f]{6}$/;
	if (!reg.test(str)) return ElMessage.warning("输入错误的hex");
	str = str.replace("#", "");
	hexs = str.match(/../g);
	for (let i = 0; i < 3; i++) hexs[i] = parseInt(hexs[i], 16);
	return hexs;
}

/**
 * rgb颜色转Hex颜色
 * @param r 代表红色
 * @param g 代表绿色
 * @param b 代表蓝色
 * @returns 返回处理后的颜色值
 */
export function rgbToHex(r: any, g: any, b: any) {
	let reg = /^\d{1,3}$/;
	if (!reg.test(r) || !reg.test(g) || !reg.test(b)) return ElMessage.warning("输入错误的rgb颜色值");
	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("")}`;
}

/**
 * 加深颜色值
 * @param color 颜色值字符串
 * @param level 加深的程度，限0-1之间
 * @returns 返回处理后的颜色值
 */
export function getDarkColor(color: string, level: number) {
	let reg = /^\#?[0-9A-Fa-f]{6}$/;
	if (!reg.test(color)) return ElMessage.warning("输入错误的hex颜色值");
	let rgb = hexToRgb(color);
	for (let i = 0; i < 3; i++) rgb[i] = Math.round(20.5 * level + rgb[i] * (1 - level));
	return rgbToHex(rgb[0], rgb[1], rgb[2]);
}

/**
 * 变浅颜色值
 * @param color 颜色值字符串
 * @param level 加深的程度，限0-1之间
 * @returns 返回处理后的颜色值
 */
export function getLightColor(color: string, level: number) {
	let reg = /^\#?[0-9A-Fa-f]{6}$/;
	if (!reg.test(color)) return ElMessage.warning("输入错误的hex颜色值");
	let rgb = hexToRgb(color);
	for (let i = 0; i < 3; i++) rgb[i] = Math.round(255 * level + rgb[i] * (1 - level));
	return rgbToHex(rgb[0], rgb[1], rgb[2]);
}

import { defineStore, createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
import piniaPersistConfig from "@/config/piniaPersist";
import { ThemeConfigProps } from './types'

export const GlobalStore = defineStore({
	id: "GlobalState",
	state: () => ({
		componentSize: "default",
		// 国际化
		language: "",
		// 主题布局
		themeConfig: {
			// 布局切换 ==>  纵向：vertical | 经典：classic | 横向：transverse | 分栏：columns
			layout: "vertical",
			// 默认 primary 主题颜色
			primary: '#009688',
			// 深色模式
			isDark: false,
			// 灰色模式
			isGrey: false,
			// 色弱模式
			isWeak: false,
			// 折叠菜单
			isCollapse: false,
			// 面包屑导航
			breadcrumb: true,
			// 面包屑导航图标
			breadcrumbIcon: true,
			// 标签页
			tabs: true,
			// 标签页图标
			tabsIcon: true,
			// 页脚
			footer: true,
			// 当前页面是否全屏
			maximize: false
		}
	}),
	getters: {},
	actions: {
		// setThemeConfig
		setThemeConfig(themeConfig: ThemeConfigProps) {
			this.themeConfig = themeConfig;
		},
		// setSize
		setCompSize(size: string) {
			this.componentSize = size;
		},
		// setLanguage
		setLanguage(language: string) {
			this.language = language;
		},
	},
	persist: piniaPersistConfig("GlobalState")
})

// piniaPersist(持久化)
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

export default pinia;

切换暗黑模式组件

<template>
	<el-switch
		v-model="themeConfig.isDark"
		@change="onAddDarkChange"
		inline-prompt
		active-color="#0a0a0a"
		inactive-color="#dcdfe6"
		:active-icon="Sunny"
		:inactive-icon="Moon"
	/>
</template>

<script setup lang="ts" name="SwitchDark">
import { computed } from "vue";
import { GlobalStore } from "@/stores";
import { Sunny, Moon } from "@element-plus/icons-vue";
import { useTheme } from "@/hooks/useTheme";
const globalStore = GlobalStore();

const { switchDark } = useTheme();

const themeConfig = computed(() => globalStore.themeConfig);

const onAddDarkChange = () => {
	switchDark();
};
</script>

自定义暗黑模式

// main.ts引入
// element css
import "element-plus/dist/index.css";
// element dark(内置暗黑模式)
import "element-plus/theme-chalk/dark/css-vars.css";
// 自定义暗黑模式
import "@/styles/element-dark.scss"

html.dark {
	--dark-bg-color: #141414;
	// layout
	.el-container {
		.el-aside {
			background-color: var(--dark-bg-color) !important;
			border-right: var(--dark-border-light) !important;
			.logo {
				border-bottom: var(--dark-border-light) !important;
			}
		}
		.not-aside {
			border-right: none !important;
		}
		.el-header {
			background-color: var(--dark-bg-color) !important;
			border-bottom-color: var(--el-border-color-light) !important;
		}
		.el-main {
			background-color: var(--dark-main-bg-color) !important;
			.card {
				background-color: var(--dark-bg-color) !important;
			}
		}
		.el-tabs {
			background-color: var(--dark-bg-color) !important;
		}
		.el-footer {
			.footer {
				background-color: var(--dark-bg-color) !important;
				border-top-color: var(--el-border-color-light) !important;
				a {
					color: var(--el-text-color-regular) !important;
				}
			}
		}
	}

	// menu
	.el-menu,
	.el-sub-menu,
	.el-menu-item,
	.el-sub-menu__title {
		background-color: var(--dark-bg-color) !important;
		&:not(.is-active) {
			color: #bdbdc0 !important;
		}
		&.is-active {
			color: #ffffff !important;
			background-color: #000000 !important;
		}
	}
	.el-menu-item:not(.is-active):hover {
		background-color: var(--dark-main-bg-color) !important;
	}
	.aside-split {
		background-color: var(--dark-bg-color) !important;
		border-right: var(--dark-border-light) !important;
		.logo {
			border-bottom: var(--dark-border-light) !important;
		}
	}

	.navbar-ri .toobar-icon {
		color: #fff !important;
	}

	.tagview {
		background-color: var(--dark-bg-color) !important;
		border-bottom-color: var(--el-border-color-light) !important;
	}

	.app-footer {
		border-top-color: var(--el-border-color-light) !important;
		background-color: var(--dark-bg-color) !important;
	}
}