在HarmonyOS鸿蒙NEXT上架时，如何确保应用支持鸿蒙系统的黑暗模式和浅色模式？

在HarmonyOS鸿蒙NEXT上架时，如何确保应用支持鸿蒙系统的黑暗模式和浅色模式？在Harmony NEXT上架时，如何确保应用支持鸿蒙系统的黑暗模式和浅色模式？ #HarmonyOS最强问答官#

sinazl 1楼•15 天前

可以做下应用的深浅色适配，主要有颜色和图片适配两部分，

颜色适配，自定义两套颜色资源（resources/dark/element/color.json和resources/base/element/color.json），通过$r()的方式加载对应的资源，会根据系统深色模式自动找到对应的颜色值资源；
图片资源，采用资源限定词目录的方式。参照颜色适配的方法，需要将深色模式下对应的同名图片放到 dark/media 目录下，再通过$r的方式加载图片资源的key值，系统做深浅色模式切换时，会自动加载对应资源文件中的value值。

对于 SVG 格式的一些简单图标，可以使用 fillColor 属性配合系统资源改变图片的绘制颜色。不通过两套图片资源的方式，也可以实现深浅色模式适配。

另外对于一些特定场景，也可以主动监听深浅色切换事件来处理：主要是this.context.config.colorMode这个属性以及onConfigurationUpdate监听颜色模式，参考this link

更多关于在HarmonyOS鸿蒙NEXT上架时，如何确保应用支持鸿蒙系统的黑暗模式和浅色模式？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

bupafengyu 2楼•15 天前作者

在HarmonyOS鸿蒙NEXT上架时，确保应用支持黑暗模式和浅色模式，需遵循以下步骤：

使用鸿蒙系统的主题管理机制：鸿蒙系统提供了ohos.app.ability.Configuration类，用于管理应用的主题配置。通过监听Configuration的变化，应用可以动态调整界面主题。
适配资源文件：在resources目录下创建dark和light子目录，分别存放黑暗模式和浅色模式下的资源文件（如颜色、图片等）。系统会根据当前主题自动加载对应的资源。

设置主题属性：在config.json文件中，为应用的theme属性设置dark和light两种主题。例如：

{
  "app": {
    "theme": {
      "dark": "dark.theme",
      "light": "light.theme"
    }
  }
}

动态切换主题：在代码中使用ohos.app.ability.Configuration类获取当前主题，并根据主题动态调整界面元素的样式。例如：

let config = this.context.getResourceManager().getConfiguration();
if (config.colorMode === Configuration.ColorMode.COLOR_MODE_DARK) {
  // 应用黑暗模式样式
} else {
  // 应用浅色模式样式
}

测试与验证：在鸿蒙NEXT设备上测试应用，确保在切换系统主题时，应用界面能够正确响应并显示对应的黑暗模式或浅色模式。

通过以上步骤，可以确保应用在鸿蒙NEXT上架时支持系统的黑暗模式和浅色模式。

caililin 3楼•15 天前

在HarmonyOS鸿蒙NEXT上架应用时，确保支持黑暗模式和浅色模式的关键步骤如下：

适配系统主题：使用ohos.theme模块动态获取系统当前主题模式（DARK/LIGHT），并据此调整应用界面颜色。
定义资源文件：在resources目录下创建dark和light子目录，分别放置对应主题的颜色、图片等资源。
使用主题资源：在布局文件中使用$color:background_dark等主题资源引用，确保在不同模式下自动切换。
测试验证：在开发者工具中切换系统主题，全面测试应用在不同模式下的显示效果，确保无异常。

通过这些步骤，可以确保应用在鸿蒙系统上完美适配黑暗和浅色模式。