应用如何适配深色模式

应用适配深色模式绝大部分场景需要利用资源

限定词目录机制，少部分特殊场景需要利用

AbilityStage.onConfigurationUpdate接口。

根据应用的不同场景可能涉及对颜色资源、图片资源以及布局资源的排查适配，如常见组件的 backgroundColor、fontColor、fillColor等属性设置的值。

颜色资源

• 自定义颜色资源

如果应用给UI组件指定的颜色属性是固定的颜色值，那么深浅模式都将是一个颜色。

例如：

Row().backgroundColor('#000000') 
Row().backgroundColor(Color.Black)

如果上述Row组件背景需要在深色模式下有不同的颜色值，需要改成引用颜色ID的方式。

在应用的 resources/base/element/color.json 文件中新增一个颜色ID。

然后将组件属性改为使用 $r 的方式。

Row().backgroundColor($r('app.color.row_bg_color'))

创建深色模式限定词目录

在 resources 目录下新增 dark/element 目录，并创建 color.json 文件。

color.json 中填写深色模式下有差异的颜色ID并指定具体的色值。例如我们将 row_bg_color 在深色模式下指定为 白色。

• 分层参数颜色资源

如果应用给UI组件指定的颜色属性是系统中的颜色ID(即分层参数中的ID)，那么不需要像自定义颜色资源那样定义2份，深浅模式下会自动切换成对应的颜色值。

例如：

Row().backgroundColor($r('sys.color.ohos_id_color_sub_background')) 
Text().fontColor($r('sys.color.ohos_id_color_text_primary'))

图片资源

针对 Image 组件渲染的图片不同格式，深色模式适配方式略有不同。

• PNG / WEBP 图片

由于当前 Image 组件还不支持 fillColor 对 Png / Webp 图片的着色，当前如果深色模式的图片颜色需要和浅色模式有区别，需要采用资源限定词目录的方式。

将深色模式下对应的同名 png / webp 图片放到 dark/media 目录下，Image 组件使用的使用引用同一资源ID即可。

• SVG图片

当前 Image 组件支持 fillColor 对 SVG 图片的着色，仅限简单的单色线稿图标，如下面这种SVG图标：

Image($r("app.media.hwtips_ic_public_view_list")) 
.width(48) 
.height(48) 
.padding(12) 
.fillColor($r('sys.color.ohos_id_color_primary')) 

上述代码可以只用一份SVG资源达到同时适配深浅模式的效果。

浅色：

深色：

颜色复杂的图标可以暂时采用类似 png/webp 图片的深色模式适配方案。

布局资源/逻辑

如果应用在深浅模式下，UI布局或者逻辑存在差异，也可以采用

AbilityStage.onConfigurationUpdate监听的方式。

具体方案如下：

1）在 AbilityStage 的 onCreate() 生命周期中获取APP当前的颜色模式并保存到 AppStorage。

2）在 AbilityStage 的 onConfigurationUpdate() 生命周期中获取最新变更的颜色模式并刷新到 AppStorage。

3）在 UI Page中通过 @StorageProp + @Watch 方式获取当前最新颜色并监听设备深色模式变化。

4)  在 aboutToAppear 初始化函数中根据当前最新颜色模式刷新状态变量。

5）在 @Watch 回调函数中执行同样的适配逻辑。

在上述回调中，我们在初始化和监听到深色模式变化后都对两个UI状态变量进行控制，从而刷新对应的UI效果。例子对应的UI布局代码如下，切换深色模式后，文字颜色和内容将会变化。实际开发过程中，应用可根据自己的场景进行扩展，执行自己的自定义适配逻辑。

Web网页深色适配

• web组件自动适配

Web({ src: this.url, controller: this.controller }) 
   .darkMode(WebDarkMode.Auto) 
   .forceDarkAccess(true)

需要将 forceDarkAccess 设置为 true, 然后会自动根据 darkMode 的值启用媒体查询prefers-color-scheme中网页所定义的深色样式。

• 网页自行适配

Web({ src: this.url, controller: this.controller }) 
   .darkMode(WebDarkMode.Auto)

不要设置 forceDarkAccess 属性，同时需要将 darkMode 设置为 Auto。

网页需要自行监听深色模式变化(可以通过和APP交互实现)，然后应用对应的网页变化。

状态栏深色适配

• 状态栏背景色和文字颜色

应用可以根据自己业务场景设置状态栏的背景色、文字颜色使其和应用界面保持协调一致，调用的接口为​​setWindowSystemBarProperties()​​

可以选择在 onConfigurationUpdate() 回调中检

测 colorMode 是否发生变化，并根据当前的colorMode 刷新状态栏的背景和文字颜色。

本文涉及的相关文档链接：

1. ​​限定词目录​​

2. ​​系统分层参数​​