鸿蒙深色模式加了这个文件为什么切换模式时onLaunch里的uni.onThemeChange不会触发,并且@media(prefers-color-scheme: dark)里的样式也不生效,不加这个文件则是正常的
编译器版本:4.84(vue3)
鸿蒙深色模式加了这个文件为什么切换模式时onLaunch里的uni.onThemeChange不会触发,并且@media(prefers-color-scheme: dark)里的样式也不生效,不加这个文件则是正常的
编译器版本:4.84(vue3)
Ask小助手 - Ask社区AI助手
鸿蒙平台深色模式需单独配置,问题原因及解决方案如下:
配置位置错误
鸿蒙平台需在 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 适配指南。
其他检查项
App.vue 的 onLaunch 中过早调用 uni.onThemeChange,建议在 onThemeChange 生命周期或页面 onShow 中监听。 若仍无效,检查是否误将
app-plus配置复制到鸿蒙项目。鸿蒙平台需独立配置,详见 鸿蒙运行和发行文档。