uni-app框架开发App如何更换主题皮肤？

经过一番思考，决定仍然采用切换dark和light。首先，明确换肤换的是什么？换肤换的是背景色、字体颜色、边框色。其中，白天版light是默认。然后，在uni.scss当中定义全局的颜色变量，再义一个class类，在切换到dark的时候，显示这个class类，用于覆盖light下的原有颜色，用于显示黑夜版的皮肤。切换到light的时候，这个类消失，展示出白天版的皮肤。

具体做法如下：

1、在页面放置一个切换皮肤的按钮：

切换函数如下：

handleChangeSkin() {

const isDark = this.isDark;

const theme = isDark ? ‘dark’ : ‘light’;

console.log(theme);

this.setCurThemeType(theme);

uni.setStorageSync(‘theme’, theme);

this.$store.dispatch(‘handleActionTheme’, theme);

getApp().handleSetTabBar();

if (isDark) {

uni.setTabBarStyle({

color: ‘#9299A7’,

selectedColor: ‘#3C79FF’,

backgroundColor: ‘#2B3757’

});

} else {

uni.setTabBarStyle({

color: ‘#9299A7’,

selectedColor: ‘#3C79FF’,

backgroundColor: ‘#fff’

});

}

},

其中 uni.setStorageSync(‘theme’, theme);是将切换的主题缓存起来，下次进入的时候在缓存当中直接取值。

this.$store.dispatch(‘handleActionTheme’, theme);用于动态的改变定义在vuex当中的变量，达到动态换肤的效果。

//上面的代码用于动态的改变APP底部导航的颜色。

if (isDark) {

uni.setTabBarStyle({

color: ‘#9299A7’,

selectedColor: ‘#3C79FF’,

backgroundColor: ‘#2B3757’

});

} else {

uni.setTabBarStyle({

color: ‘#9299A7’,

selectedC