基于mixin混入和css3的uniapp主题切换

定义导出不同主题的theme.js 主题配置

//全局样式管理
export default {
	defaultTheme: {
		"tabbar": {
			'backgroundColor': '#fff',
			"color": "#999",
			"selectedColor": "#f42",
		},
		"globalStyle": {
			"navigationBarBackgroundColor":"#F8F8F8",
			"navigationBarTextStyle":"black"
		},
		"loading": {
			"loadingPath": "/static/loading/default/loading.gif",
			"loadingBg": 'rgba(255,255,255,0.8)',
			"loadingWidth": 40,
			"loadingHeight": 40
		},
		"tabbarIconList": [{
				"iconPath": "static/icon/default/home.png",
				"selectedIconPath": "static/icon/default/homeSelect.png",
			},
			{
				"iconPath": "static/icon/default/me.png",
				"selectedIconPath": "static/icon/default/meSelect.png",
			}
		],
		"style": {
			"--text-color": "#f42",
			"--background-color": "#fff",
		}
	},
	newTheme: {
		'tabbar': {
			'backgroundColor': '#000',
			"color": "#999",
			"selectedColor": "#fff",
		},
		"globalStyle": {
			"navigationBarBackgroundColor":"#000",
			"navigationBarTextStyle":"white"
		},
		"loading": {
			"loadingPath": "/static/loading/new/loading.gif",
			"loadingBg": 'rgba(0,0,0,0.8)',
			"loadingWidth": 70,
			"loadingHeight": 30
		},
		"tabbarIconList": [{
				"iconPath": "static/icon/new/home.png",
				"selectedIconPath": "static/icon/new/homeSelect.png",
			},
			{
				"iconPath": "static/icon/new/me.png",
				"selectedIconPath": "static/icon/new/meSelect.png",
			}
		],
		"style": {
			"--text-color": "#fff",
			"--background-color": "#000",
		}
	}
}

封装themeMixin.js 全局使用

import themeInfo from "./theme.js"
import {
	themeStore
} from "../store/theme.js"

/**
 * 全局混入型
 */
export default {
	data() {
		return {
			theme: {},
			themeName: 'default',
			tabbar: [{
					"text": "首页",
					"pagePath": "pages/index/index"
				},
				{
					"text": "个人中心",
					"pagePath": "pages/personalCenter/personalCenter"
				}
			]
		}
	},
	methods: {
		setTheme(themeName, isrest = true) {
			console.log(themeName, themeInfo)
			const store = themeStore()
			//根据主题设置 tabbar 默认和选中颜色
			uni.setTabBarStyle({
				...themeInfo[themeName + 'Theme'].tabbar
			})
			setTimeout(() => {
				//根据主题设置 导航栏颜色
				uni.setNavigationBarColor({
					frontColor: themeInfo[themeName + 'Theme'].globalStyle.navigationBarTextStyle,
					backgroundColor: themeInfo[themeName + 'Theme'].globalStyle
						.navigationBarBackgroundColor
				})
			}, 100)
			//根据主题设置 tabbar 颜色和icon
			this.tabbar.forEach((item, index) => {
				uni.setTabBarItem({
					index: index,
					...themeInfo[themeName + 'Theme'].tabbarIconList[index],
					...item
				})
			})
			this.themeName = themeName
			this.theme = themeInfo[themeName + 'Theme'].style
			//缓存loading 配置
			uni.setStorageSync('loading', themeInfo[themeName + 'Theme'].loading)
			//缓存 颜色配置和当前主题名
			store.SET_THEME({
				theme: this.theme,
				themeName
			})
			if (isrest) {
				plus.runtime.restart()
			}
		}
	},
	onLoad() {
		let themeName = uni.getStorageSync('themeName')
		this.setTheme(themeName || 'default', false)
	}
}

main.js 引入themeMixin

import {
	createSSRApp
} from 'vue'
import App from './App.vue'
import themeMixin from "./mixin/themeMixin.js"
import {
	createPinia
} from 'pinia'
export function createApp() {
	const app = createSSRApp(App)
	app.mixin(themeMixin)
	app.use(createPinia())
	return {
		app
	}
}

封装pinia存取主题

import {
	defineStore
} from 'pinia'

export const themeStore = defineStore('theme', {
	state: () => {
		return {
			theme: {},
			themeName:''
		}
	},
	getters: {},
	actions: {
		SET_THEME({
			theme,
			themeName
		}) {
			this.theme = theme ? theme : {}; // for null or undefined value
			this.themeName = themeName
			// setAuthCache(TOKEN_KEY, info);
			uni.setStorageSync('themeName', themeName)
			uni.setStorageSync('theme', theme)
		},
		GET_THEME(){
			return this.theme?this.theme:uni.setStorageSync('theme', theme)
		}
	}
})

页面中使用

<template>
   //读取全局theme配置
	<view class="page" :style="theme">
		<button >地图</button>
	</view>
</template>

<script setup>
	//js中使用
	import {
		themeStore
	} from "../../store/theme.js"
	const {
		GET_THEME
	} = themeStore()
	const styleTheme = GET_THEME()
	console.log(styleTheme["--theme-color"])
</script>

<style lang="scss">
	.page{
		padding-top: var(--status-bar-height);
		background: var(--background-color);
	}
	button {
		color: var(--text-color);
		background-color: var(--background-color);
		border-radius: 0;
	}
</style>