uniapp 实现动态切换全局主题色

需求:实现开发的应用中切换主题色

如果只是需要一个主题色没有切换的需要 完全可以使用uniapp里面uni.scss文件文档

思路:预先在一个公共css中定义你需要的主题颜色,这里只是示例定义了两种颜色

• 参考文档 从中获得思路可以通过动态设置data-xx从而配合css属性选择器来动态改变主题色
• 本来是想通过mixin直接混入一个变量来达到全局控住主题色,忽略了minxi的data需要是一个函数 所以返回的值在每个页面之间是不关联的,从而使用vuex,也可以定义一个全局变量uni里面使用全局变量
• 使用store的原因是潘佳辰大佬使用store实现动态路由以及头部栏的固定
• 上图真机为红米k30ultra 安卓10

实现

• 涉及到的知识点为uniappp vuex(这里我使用了store的模块化)
• 全局css在app.vue里面引入

[data-theme='pink'] {
	background-color: pink;
	color: #fff;
}

[data-theme='blue'] {
	background-color: blue;
	color: #fff;
}

• 我们可以在vuex中定义一个appTheme全局主题变量,并且写入一个函数以此来修改主题变量

const state = {
	appTheme: 'pink'
};
const mutations = {
	TOGGLE_APP_THEME(state, color = 'pink') { //你可以传入一个颜色参数(需要上面公共css中含有,如果不传入默认为粉色)
		console.log(color)
		state.appTheme = color
	}

}
const getters = {}
const actions = {};
export default {
	state,
	actions,
	mutations,
	getters,
	namespaced: true
}

//getters中的数据(这里的getters是单个文件)
appTheme(state) {
		return state.setting.appTheme
}

• 在单页面中给你所需要设置主题色的dom添加date-them属性

//html
<text :data-theme="appTheme" @tap="toggleAppTheme('pink')">切换主题色</text>
//js
import { mapGetters } from 'vuex';
computed: {
		...mapGetters(['appTheme'])
}

• 为了省事我直接在main.js使用mixin混入了toggleAppTheme函数

Vue.mixin({
	methods: {
		toggleAppTheme(color = 'blue') {
			this.$store.commit('setting/TOGGLE_APP_THEME', color);
		}
	}
})

感觉这种方式挺麻烦的,期望大佬出现