真uni-app框架微信小程序深色模式配置教程

不要眼睛一红就觉得人间不值；散伙乃是人间常态，你我哪能例外

唠叨一会

大家都知道从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"

真uni-app框架微信小程序深色模式配置教程

但是问题就运行到微信小程序开发工具之后，这段代码消失了，这时候就想到了制作《星宿UI 0.4 多端开源小程序优化支持qq小程序添加好友激励视频等》将代码配置manifest.json/源码视图中mp-weixin节点下

真uni-app框架微信小程序深色模式配置教程

配置教程

上部分提到配置中的差异之后我们开始真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 调试，在模拟器顶部可以切换深色/浅色模式进行，如图：

真uni-app框架微信小程序深色模式配置教程

案例源码下载

关注枫瑞博客网微信公众号回复“20921”下载