应用如何适配深色模式

应用如何适配深色模式

HarmonyOS
2024-06-11 20:48:57
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
开心的兔子

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

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

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. 系统分层参数

分享
微博
QQ
微信
回复
2024-06-12 22:36:04
相关问题
应用如何适配深色模式
2284浏览 • 1回复 待解决
app适配深色浅色切换模式
1875浏览 • 1回复 待解决
应用如何适配大显示模式
1957浏览 • 1回复 待解决
关于切换深色模式应用自动重启应用
6432浏览 • 2回复 待解决
HarmonyOS深色主题适配
381浏览 • 1回复 待解决
android 应用深色模式在鸿蒙os上有异常
9308浏览 • 1回复 待解决
深色模式如何屏蔽?有人知道吗?
309浏览 • 0回复 待解决
如何设置Web组件的深色模式
298浏览 • 1回复 待解决
HarmonyOS app内如何禁用深色模式
246浏览 • 1回复 待解决
如何强制开启Web组件的深色模式
775浏览 • 1回复 待解决
有关深色模式开发的文档
1677浏览 • 1回复 待解决
深色模式怎么开发? 有没有相关api?
4221浏览 • 1回复 待解决
如何将页面设置为深色模式
2214浏览 • 1回复 待解决
HarmonyOS 组件切换深色模式不生效
373浏览 • 1回复 待解决
Web组件开启了强制深色模式会怎样?
375浏览 • 1回复 待解决
期望系统api提供深色模式控制api
1623浏览 • 1回复 待解决
鸿蒙怎么获取当前是不是深色模式
8451浏览 • 1回复 待解决