Vue3切换项目主题（包含字体颜色，背景图片）

最近在做一个管理系统项目，其中有一个由用户自定义选择系统主题样式的功能，在此之前没有接触过这方面的需求因此让我思考了良久，好在论坛里有许多参考的博客，我参考之后算是完成了这个功能

---

阅读前须知！！此方法并不支持由用户自定义主题，只支持用户选择开发者一开始就定义好的主题，即用户只能选择使用定义好的主题样式而非自定义主题样式

---

在css目录中构筑theme.css和index.css文件

theme.css文件存放你设置的样式变量名

//默认样式
:root .theme_default {
	/* 默认主题颜色 */
	--default-color: #7ccca2;

	/* 登录 图标 b */
	--wifi-icon: url(@static/style/login/wifi.png);
	/* 登录 图标 e */
}

//第二套样式
:root .theme_purple {
	/* 默认主题颜色 */
	--default-color: #3621ac;

	/* 登录 图标 b */
	--wifi-icon: url(@static/style/login/wifi.png);
	/* 登录 图标 e */
}

index.css文件使用定义好的变量作为样式的属性值

.wp-container {
	width: 100%;
	height:100vh;
	background-color: var(--default-color);
}

.bgImage{
    background-image: var(--wifi-icon);
}

只要使用css的自定义变量名就可以动态传入属性值，而接下来我们只需要定义如何切换和切换的时机就可以了

---

在app.vue文件中的加载周期，获取最大级的app节点，并检查本地存储是否记录主题的类型，有就使用记录的主题，没有就使用默认的主题，这个是为了方便我们刷新页面和重新进入页面时定义的主题不会被还原

<template>
    //app.vue文件
</template>

<script setup>
import { onBeforeUnmount,provide,nextTick,ref,onMounted} from 'vue';

onMounted(()=>{
	const app = document.querySelector('#app');
    //storage.getLocalObject是我封装的读取本地存储的方法 网上很多你们自己封装一个就好了这里不表
	let _theme = storage.getLocalObject('THEME_TYPE');
	console.log('当前主题类型为',_theme);
	if (_theme) {
		// 删除类名 theme_one 并添加类名 theme_two
		app.classList.add(_theme);
	}else{
		app.classList.add('theme_default');
	}

})

</script>
<style lang="scss" scoped>

</style>

---

在你想定义切换主题的页面加上切换的按钮和方法，并在切换的时候将值保存到本地存储中

<template>
	<button color="#7ccca2" @click="changeTheme('theme_default')">默认</button>
	<button color="#3621ac" @click="changeTheme('theme_purple')">茈紫</button>
</template>

<script setup>
import { inject, ref, onMounted, watch, onBeforeUnmount, reactive } from 'vue';

const changeTheme = (type) => {
	// 获取元素
	const app = document.querySelector('#app');
	app.className = '';
	app.classList.add(type);
    //storage.setLocalObject是我封装的修改本地存储的方法 网上很多你们自己封装一个就好了这里不表
	storage.setLocalObject('THEME_TYPE', type);
	console.log('当前主题类型为', type);
};
</script>

最后在main.ts文件引入定义的theme.css文件

import '../static/css/theme.css';

---

至此就完成了，由于涉及公司机密，实际效果就不放出来了，其实说到底就是通过预设好对应class类名下的自定义变量属性，再通过切换类名，使得其中的变量属性也更改，但是引用变量名的地方并没有改变，因此就产生了主题切换的效果，并且由于只是使用css来切换，因此不单单是vue项目，这个也可以用在js，jq，react项目里，当然这些我并没有实际去使用也只是猜测而已，哈哈！！^_^