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); } } }) 感觉这种方式挺麻烦的,期望大佬出现