HarmonyOS中，如何实现应用的夜间模式和深色主题，提升用户体验？

Question

HarmonyOS中，如何实现应用的夜间模式和深色主题，提升用户体验？

Answer 1

公豹你好，配置组件颜色后，组件颜色不跟随系统主题配色切换，框架定义了两种颜色模式，取值为 “dark”（深色模式）和 “light”（浅色模式）。应用开发中使用的各类资源文件，需要放入特定子目录中存储管理。resources 目录包括三大类目录，一类为 base 目录，一类为限定词目录，还有一类为 rawfile 目录，自定义深浅色模式的资源文件夹属于限定词目录。

Answer 2

在 HarmonyOS Next 中，可以通过以下方式实现应用的夜间模式和深色主题。

1. app 跟随系统切深色模式或者非深色模式：

   • 颜色适配，自定义两套颜色资源（resources/dark/element/color.json 和 resources/base/element/color.json），通过$r 的方式加载颜色资源的 key 值。通过系统资源实现，开发者可直接使用的系统预置资源，即分层参数，同一资源 ID 在设备类型、深浅色等不同配置下有不同的取值。通过使用系统资源，不同的开发者可以开发出具有相同视觉风格的应用，不需要自定义 2 份颜色资源，在深浅色模式下也会自动切换成不同的颜色值。参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides...。
   • 图片资源，采用资源限定词目录的方式。参照颜色适配的方法，需要将深色模式下对应的同名图片放到 dark/media 目录下，再通过$r 的方式加载图片资源的 key 值，系统做深浅色模式切换时，会自动加载对应资源文件中的 value 值。对于 SVG 格式的一些简单图标，可以使用 fillColor 属性配合系统资源改变图片的绘制颜色。不通过两套图片资源的方式，也可以实现深浅色模式适配。

2. app 不跟随系统，应用内切深色模式或非深色模式：

   • 应用通过系统接口主动设置深浅色模式，setColorMode：https://developer.huawei.com/consumer/cn/doc/harmonyos-refere...。
   • 监听深浅色切换事件，自行实现深浅色模式：this.context.config.colorMode 以及 onConfigurationOnUpdate 监听颜色模式。