注册 登录
无双的英雄
无双的英雄
  • 发布：2026-03-24 22:48
  • 更新：2026-04-01 10:06
  • 阅读：269

【报Bug】HBuildX5.05 鸿蒙APP深色模式异常（已解决）

分类：uni-app

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： windows11

手机系统： HarmonyOS NEXT

手机系统版本号： HarmonyOS 6.0.0

手机厂商： 华为

手机机型： Matepad 11.5s

页面类型： vue

vue版本： vue3

打包方式： 离线

项目创建方式： CLI

CLI版本号： 3.0.0-5000520260324001

示例代码：

复现项目代码地址：https://github.com/peerless-hero/uniapp-bug/tree/darkmode-bug

操作步骤：

本机安装的 DevEco Studio 版本为 6.0.2.642

使用yarn安装复现项目依赖，配置好包名和调试证书，然后使用HBuildX5.04运行到鸿蒙真机

预期结果：

标题可在深色模式下显示白色；深色模式切换时HBuildX可看见日志（theme change, current is dark）。

实际结果：

标题在深色模式下没有变化；深色模式切换时HBuildX没有切换日志。

bug描述：

HBuildX5.04、5.05真机调试时鸿蒙APP深色模式样式显示和监听切换均存在问题。
HBuildX版本回退到4.87可以修复。

解决方案：
在App.vue文件内添加如下代码，激活APP环境下自适应系统深色模式

// #ifdef APP  
plus.nativeUI.setUIStyle('auto')  
// #endif
2026-03-24 22:48 负责人:无 分享

没有找到相关结果

    已邀请:
    Ask小助手

    Ask小助手

    欢迎到专业群（ uni-app鸿蒙化技术交流群 ） 咨询，群中有相关专业的管理员和群友。

    作为DCloud官方人员，对这个bug反馈进行如下评审：

    反馈质量评价

    整体评价：优秀

    这是一个信息完整、定位准确的bug反馈，具备以下优点：

    1. 版本对比明确：明确指出HBuilderX 5.04存在问题，而回退到4.87可修复，这是关键的回归测试信息，有助于快速定位问题引入范围
    2. 环境信息详尽：包含完整的开发环境（Windows 11）、运行平台（HarmonyOS NEXT 6.0.0）、设备型号（Matepad 11.5s）及DevEco Studio版本（6.0.2.642）
    3. 复现资料完备：提供了GitHub复现项目地址，包含完整的代码示例和复现步骤
    4. 现象描述清晰：明确区分了样式显示异常和事件监听失效两个问题点

    内容完整性检查

    • BUG描述：详细说明了深色模式样式不生效和uni.onThemeChange监听无回调两个问题
    • 代码示例：提供了可运行的复现项目，包含manifest配置和监听代码
    • 复现步骤：步骤清晰，包含依赖安装、证书配置等关键操作
    • 预期/实际结果：对比明确，预期标题显示白色+日志输出，实际无变化且无日志

    Bug有效性分析

    该Bug成立，依据如下：

    1. 知识库佐证：在对话知识库中检索到类似反馈，有用户报告"鸿蒙端按照文档配置darkmode: true，使用uni.getSystemInfoSync获取theme字段依然是undefined"，官方人员确认"目前鸿蒙next还不支持深色模式"（针对非X版本），但后续提到"还不支持，得下个alpha了"，暗示该功能正在开发或修复中

    2. 版本回归确认：用户明确指出5.04版本出现而4.87正常，这属于明确的版本回归问题。结合知识库中HBuilderX 5.0版本对uni-text组件样式的调整记录，5.x版本确实在样式处理层面有较大改动

    3. 平台特殊性：根据文档知识库，鸿蒙平台（HarmonyOS NEXT）与App（Android/iOS）是分开并立的，深色模式适配需要单独验证。结构化文档显示暗黑模式适配指南主要针对传统App平台，鸿蒙平台的深色模式支持可能存在滞后

    建议与备注

    1. 临时解决方案：建议暂时使用HBuilderX 4.87版本进行鸿蒙开发，或关注后续alpha版本更新（根据对话记录，相关功能可能在后续alpha中修复）

    2. 验证参考：可参考插件市场中的hello-darkmode示例项目，验证深色模式在鸿蒙平台的正确配置方式

    3. 补充信息建议（可选）：如能提供5.04版本与4.87版本生成的theme.json文件差异对比，将更有助于定位问题根源

    该反馈符合高质量bug报告标准，建议纳入版本回归问题跟踪，优先处理鸿蒙平台深色模式适配异常。

    内容为 AI 生成，仅供参考
    2026-03-24 22:49
    DCloud_UNI_LXH

    DCloud_UNI_LXH

    1. css 写的不对 
      .title {  
font-size: 36rpx;  
color: #8f8f94;  
/* 此样式在HBuildX5.04深色模式下不生效 */  
@media (prefers-color-scheme: dark) {  
  color: #ffffff;  
}  
}

      要改为 

    .title {  
  font-size: 36rpx;  
  color: #8f8f94;  
}  

/* 此样式在HBuildX5.04深色模式下不生效 */  
@media (prefers-color-scheme: dark) {  
  .title {  
    color: #ffffff;  
  }  
}
    1. App 如果要自适应手机主题，要调用一下 plus.nativeUI.setUIStyle('auto')
    2026-03-30 14:58 分享

    • 无双的英雄 (作者)

      现在的问题是你这种写法也没有效果；uni.onThemeChange根本无法触发。但回退HBuilderX 4.87版本二者都能恢复正常，你还是该排查下5.04到底改了什么

      2026-03-30 16:08

    • 无双的英雄 (作者)

      目前只有鸿蒙系统受到影响，安卓、iOS等其他平台都没有此问题

      2026-03-30 16:12

    • DCloud_UNI_LXH

      回复 无双的英雄: 这块没有改动。没有效果吗？我测试是正常的。试试这个项目：https://ext.dcloud.net.cn/plugin?name=hello-darkmode

      2026-03-30 16:28

    • DCloud_UNI_LXH

      回复 DCloud_UNI_LXH: 如果你能用这个项目复现出你说的问题，那应该就是 bug　了。我刚测试了没问题，onThemeChange 正常触发、样式正常响应

      2026-03-30 16:29

    • 无双的英雄 (作者)

      回复 DCloud_UNI_LXH: 你是用真机测试还是模拟器测试？除了描述中的平板，我还借了一台P80pro，运行到真机都不正常，然后用旧版本HBuilderX 4.87反倒正常了。这期间只修改了package.json有关uni的依赖保证cli版本能对应上。

      2026-03-30 16:36

    • DCloud_UNI_LXH

      回复 无双的英雄: 模拟器，使用我发你的这个项目测试：https://ext.dcloud.net.cn/plugin?name=hello-darkmode

      2026-03-30 17:58

    • 无双的英雄 (作者)

      回复 DCloud_UNI_LXH: 我用真机和模拟器都测试了你给的这个项目，深色模式显示和切换确实都是正常的；但是我提供的复现项目还是不行，运行截图放下面了。我猜测可能只有cli项目会有此问题。

      2026-03-30 22:10

    评论 取消
    无双的英雄

    无双的英雄 (作者)

    在模拟器内开启深色模式下运行：
    5.05

    4.87

    2026-03-30 22:15 分享

    • DCloud_UNI_LXH

      我再测试下 cli 试试看，按说都是一样的

      2026-03-31 10:07

    • DCloud_UNI_LXH

      回复 DCloud_UNI_LXH: 我使用 5.05 测试了，没问题，需要添加 plus.nativeUI.setUIStyle('auto') 这个不管什么版本 HBuilderX 都要加

      2026-03-31 11:26

    • 无双的英雄 (作者)

      回复 DCloud_UNI_LXH: 添加 plus.nativeUI.setUIStyle('auto') 算是解决了，但我建议最好修改下相关文章（见下方），避免后来人踩坑

      2026-03-31 20:46

    评论 取消
    无双的英雄

    无双的英雄 (作者)

    目前获取当前主题的文档（https://uniapp.dcloud.net.cn/tutorial/darkmode.html#get-theme）是这么描述的：


    但是实测只能下来只能从osTheme字段获取，以下是uni.getSystemInfoSync 返回的完整结果：

    {  
    "appId": "appId",  
    "appLanguage": "zh-Hans-CN",  
    "appName": "appName",  
    "appTheme": "auto",  
    "appVersion": "2.1.3",  
    "appVersionCode": 149,  
    "appWgtVersion": "2.1.3",  
    "uniCompilerVersion": "5.05",  
    "uniCompilerVersionCode": 5.05,  
    "uniRuntimeVersion": "5.03",  
    "uniRuntimeVersionCode": 5.03,  
    "uniPlatform": "app",  
    "deviceBrand": "huawei",  
    "deviceId": "deviceId",  
    "deviceModel": "emulator",  
    "deviceOrientation": "portrait",  
    "devicePixelRatio": 3.375,  
    "deviceType": "phone",  
    "osLanguage": "zh-Hans",  
    "osTheme": "dark",  
    "osVersion": "6.0.2.130",  
    "osName": "harmonyos",  
    "romName": "HarmonyOS",  
    "romVersion": "6.0.0",  
    "system": "OpenHarmony-6.0.2.130",  
    "osHarmonySDKAPIVersion": 22,  
    "osHarmonyDisplayVersion": "emulator 6.0.0.130(SP7DEVC00E130R4P11)",  
    "pixelRatio": 3.375,  
    "safeArea": {  
        "top": 39,  
        "bottom": 789,  
        "left": 0,  
        "right": 377,  
        "width": 377,  
        "height": 750  
    },  
    "safeAreaInsets": {  
        "top": 39,  
        "bottom": 28,  
        "left": 0,  
        "right": 0  
    },  
    "screenHeight": 817,  
    "screenWidth": 377,  
    "statusBarHeight": 39,  
    "windowBottom": 0,  
    "windowHeight": 817,  
    "windowTop": 0,  
    "windowWidth": 377,  
    "ua": "Mozilla/5.0 (Phone; OpenHarmony 6.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36  ArkWeb/6.0.0.120 Mobile uni-app",  
    "language": "zh-Hans-CN",  
    "brand": "HUAWEI",  
    "platform": "harmonyos",  
    "uniCompileVersion": "5.05",  
    "uniCompileVersionCode": 5.05  
}

    事件监听


    实测只有uni.onThemeChange可用，onThemeChange写在App.vue内也没有任何效果。

    以下是精华文章（https://ask.dcloud.net.cn/article/36995）对plus.nativeUI的使用描述


    但实测下来新版本 plus.nativeUI.setUIStyle('auto') 必须要写，否则监听函数和深色模式样式均任何没有效果。

    2026-03-31 20:43 分享
    DCloud_UNI_LXH

    DCloud_UNI_LXH

    关于 systemInfo 返回的 theme 字段，鸿蒙特殊一些，只有 osTheme，我看下能不能加上

    关于 onThemeChange 生命周期，已在文档上添加说明，这个其实是微信小程序的生命周期

    plus.nativeUI.setUIStyle('auto') 这个一直是要写的

    2026-04-01 10:06 分享

    • 无双的英雄 (作者)

      前两点没什么问题，就是第三点：

      如果新版本以后要求APP环境下 plus.nativeUI.setUIStyle('auto') 必须要写，麻烦在文档（https://uniapp.dcloud.net.cn/tutorial/darkmode.html）重点标注一下。

      2026-04-01 13:05

    评论 取消
    为什么被折叠? 0 个回复被折叠

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

    退出全屏模式 全屏模式 回复
    友情链接
    优势智云 黑马程序员 程序员客栈 个推 锐亚教育 即速应用 DCloud新闻 InfoQ 蓝莺IM HeapDump性能社区 diygw可视化 艾普阳科技 申请友链

    DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位

    京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001

    | | 违法违规信息举报