uni-app鸿蒙平台的深色模式存在显示异常

uni-app鸿蒙平台的深色模式存在显示异常

开发环境 版本号 项目创建方式
PC Windows CLI
手机 HarmonyOS NEXT

产品分类：uniapp/App

PC开发环境操作系统：Windows

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

手机系统：HarmonyOS NEXT

手机系统版本号：HarmonyOS 6.0.0

手机厂商：华为

手机机型：mate 80 pro

页面类型：vue

vue版本：vue3

打包方式：离线

项目创建方式：CLI

CLI版本号：3.0.0-4080520251106001

示例代码：

代码参考了示例：https://ext.dcloud.net.cn/plugin?name=hello-darkmode

{
    "name": "hello-darkmode 示例工程",
    "appid": "",
    "description": "",
    "versionName": "1.1.0",
    "versionCode": 110,
    "transformPx": false,
    "app-harmony": {
        "darkmode": true,
        "safearea": {
            "background": "#F7F7F7",
            "backgroundDark": "#1F1F1F"
        }
    }
    "vueVersion": "3"
}

其他文件代码完全沿用了示例项目

操作步骤：

代码除证书、包名等配置完全使用示例项目的代码，手机改为深色模式，然后通过USB调试打开APP

预期结果：

导航栏跟随系统开启深色模式的状态切换颜色

实际结果：

导航栏永远显示light主题的颜色；

补充说明： uni.onThemeChange 实测可以监听到系统深色模式的变化

bug描述：

按照文档配置了深色模式，手机开启了深色模式，但是导航栏和底部导航栏依然使用的是light主题的颜色样式。


更多关于uni-app鸿蒙平台的深色模式存在显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app鸿蒙平台的深色模式存在显示异常的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙平台上实现深色模式适配时，导航栏未跟随系统切换的问题通常与配置和平台兼容性有关。根据你提供的配置，app-harmony节点中的darkmode: true已正确开启，但需要注意几个关键点：

  1. 鸿蒙平台深色模式配置特殊性：鸿蒙系统对深色模式的实现机制与Android/iOS存在差异。除了在pages.json中全局开启darkmode，还需确保每个页面的style配置中明确支持深色模式，例如：

    "style": {
  "dark": true
}

  2. 导航栏动态颜色适配：鸿蒙系统的导航栏颜色可能需要通过原生能力动态设置。建议在onThemeChange监听回调中，调用uni.setNavigationBarColor同步更新导航栏颜色：

    uni.onThemeChange((res) => {
  uni.setNavigationBarColor({
    frontColor: res.theme === 'dark' ? '#ffffff' : '#000000',
    backgroundColor: res.theme === 'dark' ? '#1f1f1f' : '#f7f7f7'
  })
})
回到顶部