HarmonyOS 鸿蒙Next开发案例 | 应用配色随系统深浅模式自动切换

场景说明

应用深浅配色模式是一种常见的系统外观选项，环境变暗时切换到深色模式，可以减轻眼睛疲劳和节省设备电量。如何让应用外观能够自动适应系统的深浅模式？本文将介绍三种实用的方法。

效果呈现

![效果呈现]

运行环境

本例基于以下环境开发，开发者也可基于其他适配的版本进行开发：

• IDE: DevEco Studio 3.1.1 Release
• SDK: 3.1.0(API 9)

实现思路

本文介绍三种不同的方法，让应用能够自如地适配系统的深浅模式：

• 利用系统颜色资源：这种方法最简单，只需要在应用中引用系统提供的颜色资源，例如ohos_id_color_background或ohos_id_color_primary等，就可以让应用自动跟随系统的颜色设置变化。
• 使用限定词目录：这种方法稍微复杂一些，需要在应用中创建不同的限定词目录，例如resources/dark或resources/light等，来表示不同的应用场景，然后在每个目录下定义不同资源，来适配不同的模式。最后，在应用中只需要引用这些资源的名称，而不需要指定具体的目录，系统会根据当前的模式自动选择合适的资源。
• 订阅系统环境变量变化：这种方法最灵活，但也最复杂。它需要在应用中监听系统环境变量的变化，并在变化发生时调用相应的函数来处理。这样，可以在函数中实现任何想要的逻辑，来改变应用外观。

开发步骤

新建一个Empty Ability工程，创建一个仅含"Hello World"页面的新应用。

方式一：系统资源

为了方便不同的开发者快速构建应用，OpenHarmony提供了一套系统资源供开发者直接使用。如果在UI组件中指定颜色属性为系统颜色ID，那么应用就可以自动适配系统深/浅模式，无需额外的工作。

开发者可以使用“$r('sys.type.resource_id')”语法来引用系统资源。其中，sys表示这是一个系统资源，type表示资源的类型，可以是“color”、“string”、“media”等，resource_id表示资源的ID，例如“ohos_id_color_background”、“ohos_id_color_primary”等。

可以查看官方指南中应用UX设计中关于资源的介绍，了解OpenHarmony支持的所有系统资源ID以及它们在不同模式和设备中的具体取值。

完整代码

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          // 引入系统资源颜色设置文字颜色
          .fontColor($r('sys.color.ohos_id_color_text_primary'))
      }
      .width('100%')
    }
    // 引入系统资源颜色设置应用背景颜色
    .backgroundColor($r('sys.color.ohos_id_color_sub_background'))
    .height('100%')
  }
}

方式二：限定词目录

为了让应用能够适配系统的深浅模式，我们可以创建一个特殊的Color Mode类型资源目录resources/dark，来存放适用于深色模式的资源。当系统处于深色模式时，应用就会优先读取这个目录下的资源。如果没有找到对应的资源，应用会使用默认的resources/base目录下的资源。

完整代码

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .fontColor($r('app.color.txt_color'))
      }
      .width('100%')
    }
    .backgroundColor($r('app.color.bg_color'))
    .height('100%')
  }
}

方式三：订阅系统环境变量

系统配置更新时会调用onConfigurationUpdate，我们可以获取系统配置信息中ColorMode（系统深浅模式）属性，再使用AppStorage存储系统深浅模式状态， 使用@StorageProp建立AppStorage和自定义组件的单向数据同步，通过@Watch监听状态变量变化并创建回调方法，在状态变量改变时修改颜色变量值，从而实现应用配色随系统深浅模式自动切换。

完整代码

// index.ets
import ConfigurationConstant from '@ohos.app.ability.ConfigurationConstant';
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State color_txt: string = ''
  @State color_bg: string = ''
  [@StorageProp](/user/StorageProp)('currentColorMode') [@Watch](/user/Watch)('onColorModeChange') currentMode: number = 1;

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .fontColor(this.color_txt)
      }
      .width('100%')
    }
    .height('100%')
    .backgroundColor(this.color_bg)
  }

  aboutToAppear() {
    if (this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT) {
      this.color_txt = '#121212'
      this.color_bg = '#f1f3f5'
    } else {
      this.color_txt = '#c6c6c6'
      this.color_bg = '#000000'
    }
  }

  onColorModeChange(): void {
    if (this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT) {
      this.color_txt = '#121212'
      this.color_bg = '#f1f3f5'
    } else {
      this.color_txt = '#c6c6c6'
      this.color_bg = '#000000'
    }
  }
}

// EntryAbility.ts
import UIAbility from '@ohos.app.ability.UIAbility';
import window from '@ohos.window';
import { Configuration } from '@ohos.app.ability.Configuration';

export default class EntryAbility extends UIAbility {
  onCreate(want, launchParam) {
    AppStorage.SetOrCreate('currentColorMode', this.context.config.colorMode);
  }

  onWindowStageCreate(windowStage: window.WindowStage) {
    windowStage.loadContent('pages/Index', (err, data) => {
    });
  }

  onConfigurationUpdate(newConfig: Configuration): void {
    AppStorage.SetOrCreate('currentColorMode', newConfig.colorMode);
  }
}