uniapp实现主题切换

主要的思路就是通过vuex，全局scss实现

例如主题分为 白天和暗黑主题(light/dark)
vuex

new Vuex.Store({
	state: {
		vuex_theme: uni.getStorageSync('vuex_theme') ? uni.getStorageSync('vuex_theme') : 'light'
	},
	mutations: {
		changeTheme(state, theme) {
			state.vuex_theme = theme;
			uni.setStorageSync('vuex_theme', theme);
		}
	}
})

全局scss/theme.scss

$white: #FFFFFF;
$dark: #000000;

.light {
	background: $dark;
	color: $white;
}
.dark {
	background: $white;
	color: $dark;
}

使用,如果更换主题需要换图片,直接在静态文件目录新增两个文件夹，命名为(light-images/dark-images),比如在一个.vue的文件中

<template>
	<view :class="vuex_theme">
		<image :src="`${vuex_theme}-images/1.png`" />
	view>
template>

如果需要修改顶部状态栏颜色，可参考5+api

// #ifdef APP-PLUS
plus.navigator.setStatusBarBackground("需要设置的颜色值");
// #endif

以上提供一个参考思路