uniapp适配暗黑模式配置
目录
- uniapp适配暗黑模式配置
- setUIStyle
- DarkMode 适配
- app-plus
- `manifest.json`配置
- `theme.json`配置
- `pages.json`配置
- 页面切换代码实现
- 同步手机暗黑配置
- 额外适配
参考官方文档：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 APP
console.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
