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);
		}
	}
})

感覺這種方式挺麻煩的,期望大佬出現