OpenHarmony深色模式浅析

显示全部楼层

需求背景：OpenHarmony部分应用场景需要支持深色模式，而深色模式是在通过大量的“人因研究”后，对文字前景与深色背景对比度以及文字和系统图标的颜色进行优化处理，确保人眼观看感受一致、舒适和易读的一种模式。

需求分析： 1.系统深色/浅色模式：后续单独讲解。

2.单个应用深色模式： OpenHarmony 4.1 Release（API11）开始，单个应用可设置深色模式，接口为ApplicationContext.setColorMode11+，首先需要拿到ApplicationContext，ApplicationContext模块继承自Context，提供开发者应用级别的的上下文的能力，包括提供注册及取消注册应用内组件生命周期的监听接口。具体代码如下：

<pre class="prettyprint linenums prettyprinted"><ol class="linenums"><li class="L0"><code class="lang-javascript">import UIAbility from '@ohos.app.ability.UIAbility';</code></li><li class="L1" data-node-id="20250109085715-38a4xha"><code class="lang-javascript">import ConfigurationConstant from '@ohos.app.ability.ConfigurationConstant';</code></li><li class="L2"><code class="lang-javascript"></code></li><li class="L3" data-node-id="20250109085715-n0eyc6q"><code class="lang-javascript">export default class MyAbility extends UIAbility {</code></li><li class="L4"><code class="lang-javascript"> onCreate() {</code></li><li class="L5" data-node-id="20250109085715-lkvogux"><code class="lang-javascript"> let applicationContext = this.context.getApplicationContext();</code></li><li class="L6"><code class="lang-javascript"> applicationContext.setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_DARK);</code></li><li class="L7" data-node-id="20250109085715-ez3cuv2"><code class="lang-javascript"> }</code></li><li class="L8"><code class="lang-javascript">}</code></li></ol></pre>

ConfigurationConstant.ColorMode 设置颜色模式，包括：深色模式、浅色模式、不设置（则跟随系统）。

表示颜色模式的枚举。名称值说明 COLOR_MODE_NOT_SET -1 未设置颜色模式。 COLOR_MODE_DARK 0 深色模式。 COLOR_MODE_LIGHT 1 浅色模式。

2.系统默认为浅色模式，在实际使用过程中，基于OpenHarmony 4.1 Release来调试单个应用深色模式时，社区设置应用有很多UI不搭的地方。原生设置效果：

UI原因分析：因部分.backgroundColor、.fontColor、.selectedColor等采用的是应用内部色值或采用的是固定的写法，如.backgroundColor(\$r(‘app.color.color_00000000_transparent’))、.fontColor(\$r(“app.color.font_color_007DFF”))、.selectedColor(‘#007DFF’)，这几个app.color没有对应的深色模式色值，所以导致部分场景深色模式并不生效。

解决方案： 1.修改app.color.xxx 为sys.color.xxx，其对应的id在sdk的11/ets/build-tools/ets-loader/sysResource.js。 2.但实际的颜色色值在base/global/system_resources/systemres/main/resources/base/element/color.json中，需要对应的色值从这里取。 3.而对应的base/global/system_resources/systemres/main/resources/dark/element/color.json中，当前部分色值需要自行调整。可单独编译ohos.global.systemres，在全编译命令上加上 —build-target systemres_hap 即可模块编译SystemResources.hap，替换到/system/app/ohos.global.systemres目录验证。

修改后效果图如下：

参考文献：https://docs.openharmony.cn/pages/v4.1/zh-cn/application-dev/reference/apis-ability-kit/js-apis-inner-application-applicationContext.md

[经验分享] OpenHarmony深色模式浅析

相关帖子