uniapp全网最简单实现夜间模式

uniapp的夜间模式，估计是做项目到后期比较常遇到的需求，因为现在的主流就是页面模式的应用了，所以在之前做某个项目的时候，我也是费了一些时间才实现了夜间模式，目前的效果还不算太好，虽然支持夜间和日间模式的手动切换

 首先在你最大的view里面添加

:class="isDark?'dark':''"

初始字段data中定义如下：

isDark: false,

我用的是uview2组件中的Switch 开关选择器 来进行切换

<u-switch v-model="value" @change="change"></u-switch>
<!-- methods -->
change(e) {
	console.log('change', e);
},

这在需要用的地方执行

	var that = this;
				if (that.value == false) {
					that.isDark = false;
					uni.setTabBarStyle({
						color: '#7e858f',
						selectedColor: '#76C8F9',
						backgroundColor: '#ffffff',
						borderStyle: 'black'
					})
					// plus.setStatusBarStyle("dark");
				} else if (that.value == true) {
					that.isDark = true;
					// 关于tabBar的深色模式修改
					uni.setNavigationBarColor({
						frontColor: '#312736',
						backgroundColor: '#312736',
						animation: {
							duration: 0,
							timingFunc: 'easeIn'
						}
					})
					// // 关于导航栏的深色模式修改
					uni.setTabBarStyle({
						color: '#7e858f',
						selectedColor: '#76C8F9',
						backgroundColor: '#312736',
						borderStyle: 'black'
					})
				}

切换页面保持其他页面也是夜间模式可以把change的值存起来就如这样

uni.setStorageSync("key", e)

在别的地方进行取出了进行判断在onshow生命周期中加入如下代码

onShow(){


			let value = uni.getStorageSync('key');
			if (value == false) {
				// console.log(that.aas)
				that.isDark = false;
				uni.setTabBarStyle({
					color: '#7e858f',
					selectedColor: '#76C8F9',
					backgroundColor: '#ffffff',
					borderStyle: 'black'
				})
				// plus.setStatusBarStyle("dark");
			} else if (value == true) {
				that.isDark = true;
				// 关于tabBar的深色模式修改
				uni.setNavigationBarColor({
					frontColor: '#312736',
					backgroundColor: '#312736',
					animation: {
						duration: 0,
						timingFunc: 'easeIn'
					}
				})
				// // 关于导航栏的深色模式修改
				uni.setTabBarStyle({
					color: '#7e858f',
					selectedColor: '#76C8F9',
					backgroundColor: '#312736',
					borderStyle: 'black'
				})
			}
}

css样式

.dark {
		min-height: 100vh;
		background-color: #312736 !important;
		/* overflow: hidden; */
	}

	.dark input {
		color: #c7cddb;
	}

3