HarmonyOS 鸿蒙Next 图片和文字如何适配暗色模式

HarmonyOS 图片和文字如何适配暗色模式？

sinazl 1楼•4 天前

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

1.1 颜色适配，自定义两套颜色资源（resources/dark/element/color.json和resources/base/element/color.json），通过$r的方式加载颜色资源的key值。

通过系统资源实现，开发者可直接使用的系统预置资源，即分层参数，同一资源ID在设备类型、深浅色等不同配置下有不同的取值。

通过使用系统资源，不同的开发者可以开发出具有相同视觉风格的应用，不需要自定义2份颜色资源，在深浅色模式下也会自动切换成不同的颜色值。

1.2 图片资源，采用资源限定词目录的方式。

参照颜色适配的方法，需要将深色模式下对应的同名图片放到 dark/media 目录下，再通过$r的方式加载图片资源的key值，系统做深浅色模式切换时，会自动加载对应资源文件中的value值。

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

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

2.1 应用通过系统接口主动设置深浅色模式，setColorMode：

2.2 监听深浅色切换事件，自行实现深浅色模式：

this.context.config.colorMode以及onConfigurationOnUpdate监听颜色模式。

wuwangju 2楼•4 天前

在HarmonyOS鸿蒙Next中，图片和文字适配暗色模式，可以采取以下策略：

图片适配：

文字适配：

在resources/dark/element和resources/base/element目录下分别创建color.json文件，定义深色和浅色模式下的文字颜色。
通过$r方式加载颜色资源的key值，为文字设置对应的颜色。
可以直接使用系统预置的分层参数资源，这些资源在不同配置下（如深浅色模式）会自动切换成不同的颜色值。

总之，通过合理组织资源文件和利用系统特性，HarmonyOS鸿蒙Next应用可以很好地适配暗色模式，为用户提供更加舒适的使用体验。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。