uniapp适配暗黑模式配置plus.nativeUI.setUIStyle适配DarkMode配置

uniapp适配暗黑模式配置

参考官方文档：https://uniapp.dcloud.net.cn/tutorial/darkmode.html

主要用到api：setUIStyle

setUIStyle

设置原生界面样式（暗黑模式）plus.nativeUI.setUIStyle(style);
说明：
iOS13+系统支持暗黑模式，可设置原生界面的外观样式为浅色或深色（暗黑模式）。 即使应用没有设置"全局开启暗黑模式"，也可以调用此方法强制设置原生界面外观样式。 HBuilderX2.6.3+版本支持，并且要求iOS13及以上系统。
参数：
style: ( String ) 必选 原生界面样式
可取值：
“light” - 浅色外观样式
“dark” - 深色外观样式（暗黑模式）
“auto” - 根据系统外观样式自动调整，应用需"全局开启暗黑模式”，参考https://ask.dcloud.net.cn/article/36995

DarkMode 适配

app-plus

在 manifest.json -> app-plus 中配置：

配置 darkmode:true
配置 themeLocation，指定变量配置文件 theme.json 路径，例如：在根目录下新增 theme.json，需要配置 "themeLocation":"theme.json"
在 theme.json 中定义相关变量
在 pages.json 中以@开头引用变量
整体配置

"app-plus" : {"darkmode" : true,"themeLocation" : "theme.json" // 如果 theme.json 在根目录可省略}

实现效果：

manifest.json配置

"app-plus" : {"darkmode": true,"themeLocation": "theme.json", // 如果 theme.json 在根目录可省略"safearea": {// 适配ios安全线背景色"background": "#ffffff","backgroundDark": "#1F1F1F","bottom": {"offset": "auto"}},} 

theme.json配置

可复制文件自行修改

{"light": {"navigationBarTextStyle": "black","navigationBarBackgroundColor": "#F7F7F7","backgroundColor": "#F7F7F7","tabBarColor": "#939393","tabBarSelectedColor": "#2979ff","tabBarBorderStyle": "black","tabBarBackgroundColor": "#ffffff"},"dark": {"navigationBarTextStyle": "white","navigationBarBackgroundColor": "#1F1F1F","backgroundColor": "#1F1F1F","tabBarColor": "#cacaca","tabBarSelectedColor": "#2979ff","tabBarBorderStyle": "white","tabBarBackgroundColor": "#1F1F1F"}
}

pages.json配置

主要是修改tabbar和globalStyle，
tabbar的icon也可以通过theme.json配置不同的图片，然后通过 @这种方式引入即可。

"tabBar": {"color": "@tabBarColor","selectedColor": "@tabBarSelectedColor","borderStyle": "@tabBarBorderStyle","backgroundColor": "@tabBarBackgroundColor","fontSize": "11px","iconWidth": "20px","iconHeight": "20px","spacing": "5px","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "static/images/tabbar/home.png","selectedIconPath": "static/images/tabbar/home_select.png"},{"pagePath": "pages/mine/mine","text": "我的","iconPath": "static/images/tabbar/wode.png","selectedIconPath": "static/images/tabbar/wode_select.png"}]},"globalStyle": {"navigationBarTextStyle": "@navigationBarTextStyle","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "@navigationBarBackgroundColor","backgroundColor": "@backgroundColor"}

页面切换代码实现

mine.vue

<template><button type="text" class="change-theme" @click="changeTheme('dark')">切换暗黑模式</button><button type="text" class="change-theme" @click="changeTheme('light')">切换明亮模式</button>
<templaate>
<script setup>
// 切换用plus实现
function changeTheme(theme) {//暗黑模式// #ifdef APPconsole.log('✨file:mine.vue:52✨✨', uni.getSystemInfoSync());plus.nativeUI.setUIStyle(theme)// 此处监听也是监听的的app主题信息，不是手机系统的主题uni.onThemeChange(({ theme }) => {console.log('onThemeChange', theme)})// #endif
}
</script>

至此配置，手机上点击切换明亮和暗黑是没有问题的，都是正常切换；
但是没办法同步手机系统的设置。

同步手机暗黑配置

在 manifest.json -> plus 中配置：【注意：保存后，提交云端打包后生效】

• iOS平台：在 “plus” -> “distribute” -> “apple” 节点下添加 defaultTheme 节点
• Android平台：在 “plus” -> “distribute” -> “google” 节点下添加 defaultNightMode 节点

"app-plus" : {"darkmode" : true,"themeLocation" : "theme.json","safearea" : {// 安全区域看项目需要,设置"none"需要页面内自行适配"background" : "#ffffff","backgroundDark" : "#1F1F1F","bottom" : {"offset" : "auto" // "auto" | "none"}},"distribute" : {"apple" : {//"UIUserInterfaceStyle": "Automatic",   //不推荐使用，设置light或dark后将无法跟随系统"defaultTheme" : "auto" // HBuilderX 3.6.10及以上版本支持  },"google" : {"defaultNightMode" : "auto" // "light" | "dark" | "auto"}}
},

进行上面配置后，打包自定义基座，然后运行到手机查看效果。
切换手机系统暗黑模式，app会自动同步设置。

注：
如果手动调用plus.nativeUI.setUIStyle()设置了’dark’或者’light’，则不会跟随系统；
再次调用plus.nativeUI.setUIStyle('auto')，及设置成自动后，可再次跟随系统变化。

额外适配

有些页面可能会出现无法适配的问题，因为自己写的样式，这是背景色白色了，需要自行进行适配

比如像下面这种样式，我用的uni-list组件，就需要再写样式进行适配。

适配样式，只做参考，根据实际情况进行修改

@media (prefers-color-scheme: dark) {.content {background-color: rgb(31, 31, 31);}::v-deep .uni-list {background-color: rgb(31, 31, 31);}::v-deep .uni-list-item {background-color: rgb(31, 31, 31) !important;}::v-deep .uni-list-item__content-title {color: #999999 !important;}
}

适配后的样式：

兼容：
iOS 13+、Android 10+设备上才支持

参考资料：
https://ask.dcloud.net.cn/article/36995
https://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.setUIStyle
https://uniapp.dcloud.net.cn/tutorial/darkmode.html#open-darkmode