鸿蒙深色模式

分类：鸿蒙Next

暗黑模式深色外观鸿蒙next

鸿蒙深色模式加了这个文件为什么切换模式时onLaunch里的uni.onThemeChange不会触发，并且@media(prefers-color-scheme: dark)里的样式也不生效，不加这个文件则是正常的

编译器版本：4.84（vue3）

2025-12-04 16:17 负责人:无分享

2 个回复

鸿蒙平台深色模式需单独配置，问题原因及解决方案如下：

配置位置错误
鸿蒙平台需在 manifest.json 的 app-harmony 节点 内声明 "darkmode": true 和 "themeLocation"（如 "themeLocation": "theme.json"）。若仅在 mp-weixin 或其他平台配置，鸿蒙设备无法识别，导致 uni.onThemeChange 不触发且 CSS 媒体查询失效。
正确配置示例
```
{  
 "app-harmony": {  
   "darkmode": true,  
   "themeLocation": "theme.json"  
 }  
}  
```
- 确保 theme.json 文件存在且路径正确（通常放根目录）。
- 鸿蒙平台 不支持 app-plus 相关配置（如文档中 open-darkmode-app-plus 部分），必须使用 app-harmony 节点。
CSS 适配限制
鸿蒙对 @media (prefers-color-scheme: dark) 支持有限，建议优先通过 theme.json 定义变量（如 backgroundColor），并在 pages.json 中引用 @ 变量。参考 DarkMode 适配指南。
其他检查项
- 确认 HBuilderX 版本 ≥ 4.24（鸿蒙基础支持要求）。
- 避免在 App.vue 的 onLaunch 中过早调用 uni.onThemeChange，建议在 onThemeChange 生命周期或页面 onShow 中监听。

若仍无效，检查是否误将 app-plus 配置复制到鸿蒙项目。鸿蒙平台需独立配置，详见鸿蒙运行和发行文档。

内容为 AI 生成，仅供参考

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信

提供下你看到的这个帖子，截图里是 4.7x ，目前最新版已经是 4.8x 了，功能可能已经修复了。你使用空白工程，增加你的代码发出来，直接提供复现工程，并说明操作步骤。

2025-12-04 16:58 分享

DCloud_UNI_OttoJi

你带一下原始的帖子，发一下复现工程

2025-12-04 16:59
2***@qq.com (作者)

回复 DCloud_UNI_OttoJi: https://ask.dcloud.net.cn/article/42222原帖子是这个

2025-12-04 17:08
DCloud_UNI_OttoJi

回复 2***@qq.com: 给原作者留言，跑原作者提供的案例

2025-12-04 17:26

要回复问题请先登录或注册