不要眼睛一红就觉得人间不值；散伙乃是人间常态，你我哪能例外
唠叨一会
大家都知道从ios出现深色模式后，目前android也逐步更近；虽然部分第三方应用还是无法根据系统自动切换浅色/深色模式，但是在微信客户端和小程序这块做的还是比较好的！之前也说过要配置深色模式，但是枫瑞的星宿ui是uni-app框架非微信原生小程序开发就写了 踩坑记录；
配置差异
我们观看微信小程序开发文档的时候有提到这段话：
当app.json中配置darkmode为true时，小程序部分配置项可通过变量的形式配置，在变量配置文件中定义不同主题下的颜色或图标，
方法如下：在app.json中配置themeLocation，指定变量配置文件theme.json路径，
例如：在根目录下新增theme.json，需要配置”themeLocation”:”theme.json”在theme.json中定义相关变量；在app.json中以@开头引用变量
uni-app框架作为多端服务，基本结构是和微信小程序是一致的；同时我们也熟知app.josn就是uni框架的pages.json，同理我们应该只需要在pages.json 文件中插入该代码就可以了
// 开启深色模式 "darkmode": true, // 切换主题颜色 "themeLocation":"theme.json"
但是问题就运行到微信小程序开发工具之后，这段代码消失了，这时候就想到了制作《星宿UI 0.4 多端开源小程序优化 支持qq小程序添加好友 激励视频等》将代码配置manifest.json/源码视图中mp-weixin节点下
配置教程
上部分提到配置中的差异之后我们开始真uni-app框架微信小程序深色模式配置教程，毕竟百度上的文章基本接近满分作文
1.manifest.json/源码视图中mp-weixin节点下插入以下代码
// 开启深色模式 "darkmode": true, // 切换主题颜色 "themeLocation":"theme.json"
2.根目录新建theme.json（也就是和pages.json同级目录）插入官方给的代码
{ "light": { "navBgColor": "#f6f6f6", "navTxtStyle": "black", "bgColor": "#ffffff", "bgTxtStyle": "light", "bgColorTop": "#eeeeee", "bgColorBottom": "#efefef", "tabFontColor": "#000000", "tabSelectedColor": "#3cc51f", "tabBgColor": "#ffffff", "tabBorderStyle": "black", "iconPath1": "image/icon1_light.png", "selectedIconPath1": "image/selected_icon1_light.png", "iconPath2": "image/icon2_light.png", "selectedIconPath2": "image/selected_icon2_light.png", }, "dark": { "navBgColor": "#191919", "navTxtStyle": "white", "bgColor": "#1f1f1f", "bgTxtStyle": "dark", "bgColorTop": "#191919", "bgColorBottom": "#1f1f1f", "tabFontColor": "#ffffff", "tabSelectedColor": "#51a937", "tabBgColor": "#191919", "tabBorderStyle": "white", "iconPath1": "image/icon1_dark.png", "selectedIconPath1": "image/selected_icon1_dark.png", "iconPath2": "image/icon2_dark.png", "selectedIconPath2": "image/selected_icon2_dark.png", } }
3.pages.json主题相关以外的配置项
将theme的配置使用@符号方式引入到配置中，这样就可以开启自动切换
{ "window": { "navigationBarBackgroundColor": "@navBgColor", "navigationBarTextStyle": "@navTxtStyle", "backgroundColor": "@bgColor", "backgroundTextStyle": "@bgTxtStyle", "backgroundColorTop": "@bgColorTop", "backgroundColorBottom": "@bgColorBottom" }, "tabBar": { "color": "@tabFontColor", "selectedColor": "@tabSelectedColor", "backgroundColor": "@tabBgColor", "borderStyle": "@tabBorderStyle", "list": [{ "iconPath": "@iconPath1", "selectedIconPath": "@selectedIconPath1" }, { "iconPath": "@iconPath2", "selectedIconPath": "@selectedIconPath2" }] } }
4.开启监听系统主题（可不操作）
在app.vue文件中配置应用生命周期
onThemeChange:function(options){ console.log(options,'系统主题'); }
5.界面css深色模式切换
/* 暗黑模式下应用的样式 */ @media (prefers-color-scheme: dark) { page{ background: #000000; } }
其他说明
1.调试库版本在 2.11 以上
2.微信开发者工具无法实现界面背景切换 需要在真机上预览
3.微信开发者工具 1.03.2004271 版本开始已支持 DarkMode 调试，在模拟器顶部可以切换 深色/浅色 模式进行，如图：
案例源码下载
关注枫瑞博客网微信公众号回复“20921”下载
