uview-ui项目暗黑模式（笔记）

1、main.js

import mixin from '@/common/js/setTheme.js'
Vue.use(mixin)
// import {getTheme} from '@/common/js/setTheme.js';
// Vue.prototype.$theme = getTheme;

2、App.vue

//监听系统主题变化
onThemeChange(e){
	this.getTheme()
},

3、setTheme.js

import {
	isEmpty
} from '@/common/js/util.js';
export default {
	install(Vue) {
		Vue.mixin({
			data() {
				return {
					theme: 'light',
					navTheme: {},
					themeStyle: {},
				}
			},
			onLoad() {
				this.getTheme();
			},
			methods: {
				getTheme() {
					let temp = this.$SysCache.get('theme');
					if (!isEmpty(temp)) {
						this.theme = temp;
					}
					this.navTheme = {
						background: '#2d6ec4',
						color: '#ffffff'
					}
					if (this.theme == 'dark') {
						this.themeStyle = {
							color: '#fff',
							fontsize: '30rpx',
							// background: '#242424'
						}
						//修改tabBar主体
						uni.setTabBarStyle({
							color: '#535353',
							backgroundColor: '#242424',
							borderStyle: 'white',
							selectedColor:'#ffffff'
						})
					} else {
						this.themeStyle = {
							color: '#333',
							fontsize: '30rpx'
						}
						uni.setTabBarStyle({
							backgroundColor: '#ffffff',
							borderStyle: 'black',
							color: '#7A7E83',
							selectedColor:'#2d6ec4'
						})
					}
				},
			}
		})
	}
}

4、util.js

//判断一个值是否为空
export const isEmpty = (v) => {
	switch (typeof v) {
		case 'undefined':
			return true;
		case 'string':
			if (v.replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g, '').length == 0) return true;
			break;
		case 'boolean':
			if (!v) return true;
			break;
		case 'number':
			if (0 === v || isNaN(v)) return true;
			break;
		case 'object':
			if (null === v || v.length === 0) return true;
			for (var i in v) {
				return false;
			}
			return true;
	}
	return false;
}

5、最外层项目中的uni.scss

/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */

/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */
 @import 'uview-ui/theme.scss';
 @import '@/static/theme/theme.scss';

6、theme.scss

/**
 * dark  (深色模式)
 */

/* 按钮相关颜色 */
.dark-btn-special{
	background-color: #2d6ec4 !important;
	color: #ffff !important;
}
.dark-btn-primary{
	background-color: #ffffff !important;
	color:#191919 !important;
}
/* 文字基本颜色 */
.dark-text-primary{
	color: #ffffff !important;
}
.dark-text-dark{
	color: #333333 !important;
}
.dark-text-light{
	color: #ffffff !important;
}
/* 背景颜色 */
.dark-bg-primary{
	background-color:#131619!important;
}
.dark-sepcial-reverse{
	background-color: #191D23 !important;
}
.dark-bg-special{
	background-color:#191D23!important;
}
.dark-bg-general{
	background-color:#191D23!important;
}
/*反色背景色*/
.dark-bg-reverse{
	background-color:#131619!important;
}
.dark-bg-subSec{
	background-color:#191D23!important;
}
.dark-bg-tips{
	background-color:#191D23 !important;
}
/* 边框颜色 */
.dark-border{
	border-color: #c8c7cc !important;
}
/*盒阴影*/
.dark-box-shadow{
	box-shadow: 0px 0px 3px 0px #ccc !important;
}
/*首页通知公告背景色*/
.dark-bg-notice{
	background-color: #191D23  !important;
}
/*mask  遮挡层背景色*/
.dark-bg-mask{
	background-color: #3f3f3f  !important;
}
 


/**
 * light  (浅色色模式)
 */
/* 按钮相关颜色 */
.light-btn-special{
	background-color: #2d6ec4 !important;
	color: #ffff !important;
}
.light-btn-primary{
	background-color: #ffffff !important;
	color: #333333 !important;
}
/* 文字基本颜色 */
.light-text-primary{
	color: #333333 !important;
}
.light-text-dark{
	color: #ffffff !important;
}
.light-text-light{
	color: #666666 !important;
}
/* 页面整体背景颜色 */
.light-bg-primary{
	background-color: #f6f6f6 !important;
}
/* 布局背景颜色 */
.light-bg-special{
	background-color: #2d6ec4 !important;
}
.light-sepcial-reverse{
	background-color:#eeeeef !important;
}
//分段器
.light-bg-subSec{
	background-color:#0551B5!important;
}
/*反色背景色*/
.light-bg-reverse{
	background-color:#ffffff !important;
}
//分段器
.light-bg-tips{
	background-color:#FFFCEE!important;
}
/* 布局背景颜色 */
.light-bg-general{
	background-color: #ffffff !important;
}
/* 边框颜色 */
.light-border{
	border-color: none !important;
}
/*盒阴影*/
.light-box-shadow{
	box-shadow:none  !important;
}
/*首页通知公告背景色*/
.light-bg-notice{
	background-color: #F7FAFF !important;
} 
/*mask  遮挡层背景色*/
.light-bg-mask{
	background-color: rgba(0, 0, 0, 0.2) !important;
}