文档在这里 https://uniapp.dcloud.net.cn/tutorial/darkmode.html#open-darkmode
按这文档配置了,css里用的查询判断。鸿蒙里能用,但app最上标题栏不正常。我的红米手机暗黑模式怎么都不正常。
排查来排查去找不到问题,无赖把官方的例子下下来仔细比对,发现他们配置文件里省略了这句
"themeLocation" : "theme.json" // 如果 theme.json 在根目录可省略
我的theme.json文件里是在当前根目录且是对的,干脆也删掉这句试试,一删除好了。
太神奇了,留个备忘。也行是缓存的问题也说不定,反正解决了就好。
后面鸿蒙升到6又不行了。总结了这几点。
1. manifest.json app-harmony
"app-harmony": {
"darkmode": true,
"themeLocation": "theme.json",
"safearea": {
"background": "#ffffff",
"backgroundDark": "#2f0508",
"bottom": {
"offset": "none"
}
}
}
2根目录
{
"light": {
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#fff6f0",
"backgroundColor": "#f8f8f8"
},
"dark": {
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#1f1f1f",
"backgroundColor": "#1f1f1f"
}
}
3. pages.json globalStyle
"globalStyle": {
"navigationBarBackgroundColor": "@navigationBarBackgroundColor",
"navigationBarTextStyle": "@navigationBarTextStyle",
"backgroundColor": "@backgroundColor"
}
4. App.vue 核心执行代码
onLaunch() {
// #ifdef APP
plus.nativeUI.setUIStyle('auto')
// #endif
uni.onThemeChange(res => {
console.log('主题状态', res.theme)
})
}
5. CSS 标准适配写法
.box {
color: #333;
}
@media (prefers-color-scheme: dark) {
.box {
color: #fff;
}
}