HarmonyOS鸿蒙Next中如何实现应用内打开深色模式开关或选择跟随系统呢

HarmonyOS鸿蒙Next中如何实现应用内打开深色模式开关或选择跟随系统呢 好像现在审核有对深色模式的适配有要求，该怎么实现呢？

8 回复

在resources目录下分别创建：

  • base/element/color.json（浅色模式颜色）
  • dark/element/color.json（深色模式颜色）
// base目录
{ "app_background": "#FFFFFF", "text_primary": "#000000" }

// dark目录
{ "app_background": "#1A1A1A", "text_primary": "#E6E6E6" }

// 切换深色模式
getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_DARK);

// 切换浅色模式
getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT);

// 跟随系统
getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);

参考地址

https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-dark-mode-adaptation#section128661451172714

更多关于HarmonyOS鸿蒙Next中如何实现应用内打开深色模式开关或选择跟随系统呢的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


深色模式功能更随系统切换

当系统切换到深色模式后，应用内可能会出现部分内容切换到深色主题的情况，例如状态栏、弹窗背景色、系统控件等，会导致应用内页面效果错乱。

为应对上述情况，需要对应用进行深色模式下的内容适配，目前该适配主要依靠资源目录。当系统对应的设置项发生变化后（如系统语言、深浅色模式等），应用会自动加载对应资源目录下的资源文件。

系统为深色模式预留了dark目录，该目录在应用创建时默认不存在，在进行深色模式适配时，需要开发者在src/main/resources中手动地创建出dark目录，将深色模式所需的资源放置到该目录下。对于浅色模式所需的资源，可以放入默认存在的src/main/resources/base目录下。

获取深浅色模式：

let colorMode: number = this.context.getApplicationContext().config.colorMode;

设置深浅色模式：

this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_DARK);
this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT);

使用ApplicationContext.setColorMode()控制深浅色模式：

  • 跟随系统：设为COLOR_MODE_NOT_SET
  • 强制浅色：设为COLOR_MODE_LIGHT
  • 强制深色：设为COLOR_MODE_DARK

具体参考如下：

深色模式适配 ：

深色模式（Dark Mode）又称之为暗色模式，是与日常应用使用过程中的浅色模式（Light Mode）相对应的一种UI主题。深色模式最早来源于人机交互领域的研究和实践，该模式并非简单地将页面背景变为黑色，文字内容变为白色，而是提供一整套适配深色模式的应用配色主题。深色模式相较浅色模式更加柔和，能减少亮度对用户眼睛造成的刺激和疲劳，此外深色模式能在一定程度上降低应用功耗，提升续航表现。

应用深色模式适配，需遵循基本的UX设计原则，保障应用页面内容的易读性、舒适性和一致性，具体可参考深色模式设计原则。应用适配过程主要包含字体颜色、元素背景色等颜色资源的适配，媒体资源如图片图标的适配，以及系统状态栏的适配，此外需要对一些特殊情况如使用了Web组件加载的Web页面进行处理。

本文主要将介绍深色模式的适配过程，同时会列举出适配过程中的常见问题及解决方案。

实现原理

当系统切换到深色模式后，应用内可能会出现部分内容切换到深色主题的情况，例如状态栏、弹窗背景色、系统控件等，会导致应用内页面效果错乱。

为应对上述情况，需要对应用进行深色模式下的内容适配，目前该适配主要依靠资源目录。当系统对应的设置项发生变化后（如系统语言、深浅色模式等），应用会自动加载对应资源目录下的资源文件。

系统为深色模式预留了dark目录，该目录在应用创建时默认不存在，在进行深色模式适配时，需要开发者在src/main/resources中手动地创建出dark目录，将深色模式所需的资源放置到该目录下。对于浅色模式所需的资源，可以放入默认存在的src/main/resources/base目录下。

更多详细信息参加官方文档：https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-dark-mode-adaptation

可以通过setColorMode API控制颜色模式，并在资源目录配置深浅色资源适配

在HarmonyOS Next中，应用内实现深色模式开关或跟随系统，需使用UI上下文提供的setColorScheme方法。通过getUIAbilityContext().getUIContext().setColorScheme(ColorScheme.SYSTEM)可设置为跟随系统；使用ColorScheme.LIGHT或ColorScheme.DARK可分别固定为浅色或深色模式。应用界面会根据设置自动适配主题。

在HarmonyOS Next中，可以通过Configuration类获取当前系统的颜色模式，并利用UIAbility的onConfigurationUpdate回调监听系统主题变化。具体步骤如下：

  1. 获取当前颜色模式：

    import { Configuration } from '[@ohos](/user/ohos).app.ability.Configuration';

let config: Configuration = this.context.config;
let currentColorMode: number = config.colorMode;

  2. 监听系统主题变化： 在UIAbility中重写onConfigurationUpdate方法：

    onConfigurationUpdate(config: Configuration): void {
  if (this.currentColorMode !== config.colorMode) {
    // 触发应用内主题更新逻辑
    this.updateAppTheme(config.colorMode);
  }
}

  3. 应用内切换主题： 可通过setColorMode()设置应用独立主题，或选择跟随系统：

    // 跟随系统（默认）
let config: Configuration = this.context.config;
config.colorMode = ColorMode.COLOR_MODE_SYSTEM;

// 设置为深色/浅色模式
config.colorMode = ColorMode.COLOR_MODE_DARK; // 或 COLOR_MODE_LIGHT

  4. 适配深色模式资源： 在resources目录下分别创建element和media的dark子目录，放置深色模式对应的颜色值和图片资源。

注意：应用内主题切换后建议调用window的invalidate方法触发界面刷新。此方案可同时满足审核要求与用户体验需求。

回到顶部