uni-app做iOS的夜间模式

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.检测到手机,真机运行

你可能感兴趣的:(uni-app做iOS的夜间模式)