iOS13適配暗黑模式/夜間模式/深色模式/暗黑主題(DarkMode)
問題:
1.監(jiān)聽Android深色或淺色模式的切換
2.在app內(nèi)頁面的按鈕切換
3.監(jiān)聽系統(tǒng)外觀模式改變
開啟適配暗黑模式(DarkMode)
// 在HBuilderX打包生成的App默認已關(guān)閉兼容暗黑模式
// 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;
}
}
獲取當前系統(tǒng)外觀模式
// 對于頁面中的原生標題欄(TitleNView)以及uni-app中的nvue頁面梢什,則需獲取當前的外觀模式桐早,動態(tài)修改樣式進行適配眠菇。
getUiStyle(){
var style = plus.navigator.getUiStyle();
if('dark'==style){
console.log('當前為暗黑模式');
}else{
console.log('當前為普通模式');
}
}
// 關(guān)于tabBar的深色模式修改
uni.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#1f1f1f',
animation: {
duration: 400,
timingFunc: 'easeIn'
}
})
// 關(guān)于導航欄的深色模式修改
uni.setTabBarStyle({
color: '#B6B6B6',
selectedColor: '#EA8C1B',
backgroundColor: '#1F1F1F',
borderStyle: 'black'
})
tabBar uni.setNavigationBarColor
導航欄 uni.setTabBarStyle
對于系統(tǒng)原生的一些提示框是會在開啟深色模式后亭螟,默認自動適配系統(tǒng)設置的外觀樣式小渊。
uni中監(jiān)聽系統(tǒng)主題變化
uni.onUIStyleChange(function (res) {
console.log(res.style);
});
詳情 https://uniapp.dcloud.io/api/system/theme
關(guān)于調(diào)試起暮,查看效果
1.準備一個iphone7+,系統(tǒng)設置—顯示與亮度-外觀(淺色與深色)
2.使用iTools獲取手機的UDID
3.將UDID加入https://developer.apple.com/account/resources/devices/list艇挨,添加到Devices中
4.生成新的Profiles描述文件
5.按照自定義調(diào)試基座及使用說明上的方式残炮,準備development證書和development描述文件,打包development的本地ipa缩滨。
6.檢測到手機势就,真機運行