iOS13适配暗黑模式/夜间模式/深色模式/暗黑主题(DarkMode)
问题:
1.监听Android深色或浅色模式的切换
2.在app内页面的按钮切换
3.监听系统外观模式改变
开启适配暗黑模式(DarkMode)
// 在HBuilderX打包生成的App默认已关闭兼容暗黑模式
// 1.打开项目的manifest.json文件,切换到“源码视图”项 添加
"app-plus": {
"distribute": {
"ios": {
"UIUserInterfaceStyle": "Automatic",
//...
},
//...
},
//...
app页面的颜色切换
// 推荐使用CSS中的媒体查询 prefers-color-scheme 进行适配
@media (prefers-color-scheme: dark){
.content {
background-color: #1B1C1E;
color: white;
}
}
获取当前系统外观模式
// 对于页面中的原生标题栏(TitleNView)以及uni-app中的nvue页面,则需获取当前的外观模式,动态修改样式进行适配。
getUiStyle(){
var style = plus.navigator.getUiStyle();
if('dark'==style){
console.log('当前为暗黑模式');
}else{
console.log('当前为普通模式');
}
}
// 关于tabBar的深色模式修改
uni.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#1f1f1f',
animation: {
duration: 400,
timingFunc: 'easeIn'
}
})
// 关于导航栏的深色模式修改
uni.setTabBarStyle({
color: '#B6B6B6',
selectedColor: '#EA8C1B',
backgroundColor: '#1F1F1F',
borderStyle: 'black'
})
tabBar uni.setNavigationBarColor
导航栏 uni.setTabBarStyle
对于系统原生的一些提示框是会在开启深色模式后,默认自动适配系统设置的外观样式。
uni中监听系统主题变化
uni.onUIStyleChange(function (res) {
console.log(res.style);
});
详情 https://uniapp.dcloud.io/api/system/theme
关于调试,查看效果
1.准备一个iphone7+,系统设置—显示与亮度-外观(浅色与深色)
2.使用iTools获取手机的UDID
3.将UDID加入https://developer.apple.com/account/resources/devices/list,添加到Devices中
4.生成新的Profiles描述文件
5.按照自定义调试基座及使用说明上的方式,准备development证书和development描述文件,打包development的本地ipa。
6.检测到手机,真机运行