uniapp适配暗黑模式要注意的点
编辑时间:2025-10-04 作者:金满斗 浏览量:851 来源:原创

文档在这里 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;
	}
}



来说两句吧