鸿蒙(HarmonyOS)应用开发实战——深色模式适配

往期知识点整理

• 鸿蒙（HarmonyOS）北向开发知识点记录~
• 被裁员后，踏上了鸿蒙开发求职之路
• 持续更新中……

介绍

本示例介绍在开发应用以适应深色模式时，对于深色和浅色模式的适配方案，采取了多种策略如下：

1. 固定属性适配：对于部分组件的颜色属性，如背景色或字体颜色，若保持不变，可直接设定固定色值或引用固定的资源文件。
2. 双资源目录适配：在resources目录下新增dark子目录，用于存放深色模式下的特定颜色配置（color.json文件）和图片资源（media文件）。在深色模式下，系统会自动加载此目录中的颜色及图片资源，确保与浅色模式下的UI元素色彩差异性。
3. 利用系统分层参数：对于支持深浅模式切换的系统层级颜色资源，我们可以直接引用这些具有分层特性的参数，使得当切换设备主题时，相关组件的颜色能根据系统当前颜色模式自动更新。
4. 监听当前颜色模式变化：通过注册AbilityStage.onConfigurationUpdate事件监听器，实时捕捉到设备深浅颜色模式的变化，并据此动态调整UI布局结构或逻辑处理，以适应不同模式下的最佳视觉体验。

效果图预览

使用说明

1. 在应用主页点击“深色模式”案例，将应用切至后台，系统颜色模式发生改变（如在系统设置中切换深浅色模式），当应用重新被激活至前台时，能够立即检测到系统颜色模式的变化，并自动更新为对应颜色主题的视图界面。

实现思路

1. 当UI组件的颜色属性被设置为固定颜色值时，其在深色模式和浅色模式下的显示颜色将保持不变。

// 将Text直接设置成'#000000'固定色值
Text("精品好礼")
 .opacity(0.6)
 .fontColor($r('app.color.fit_for_dark_mode_black_font_color'))
 .margin({
    left: $r('app.integer.fit_for_dark_mode_text_margin_left') })

2. 为了实现深色模式下的颜色适配，可以在resources目录下新建’dark/element’的子目录，并在此目录中创建color.json文件。为深色模式下的各个UI组件指定相应的颜色值，务必确保与浅色模式下同名颜色资源名称一致，以确保系统能够正确识别并切换。

// 用资源ID方式设置Column背景色。（浅色模式色值为'#FA5A3C'、深色模式色值为'#000000'）
.backgroundColor($r('app.color.fit_for_dark_mode_column_bg_color'))

3. 若UI组件的颜色属性引用的是系统提供的具有层级参数的颜色资源，则当设备在深色模式和浅色模式间切换时，这些颜色会自动调整至对应模式下的预设色