HarmonyOS NEXT深色模式案例(1)

• 第一步保存全局参数，并通过onConfigurationUpdate刷新状态栏

// 获取当前的颜色模式并保存并在onConfigurationUpdate
AppStorage.setOrCreate('currentColorMode', this.context.config.colorMode);
// 保存windowStage供fitfordarkmode的har包中FitForDarkPage.ets中setStatusBar方法修改状态栏颜色。
AppStorage.setOrCreate('windowStage', windowStage);

// 检测当前的深浅模式是否发生变化，刷新状态栏
onConfigurationUpdate(config: Configuration) {
 // 获取最新的变更颜色并更新到AppStorage
 AppStorage.setOrCreate('currentColorMode', config.colorMode);
 logger.info(`onConfigurationUpdate, config: ${JSON.stringify(config)}`);
}

• 第二步在FitForDarKMode.ets中获取并监听当前颜色模式

// @StorageProp + @Watch 获取并监听当前颜色模式
@StorageProp('currentColorMode') @Watch('onColorModeChange') currentMode: number = 0;
// @Watch回调函数，监听颜色模式刷新状态变量
onColorModeChange(): void {
  if (this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK) {
    this.banner = $r("app.media.dark_mode_banner");
  } else {
    this.banner = $r("app.media.light_mode_banner");
  }
}

• 第三步在FitForDarKMode.ets生命周期aboutToAppear中根据当前颜色模式刷新banner状态变量，切换不同的图片。

// 在自定义组件生命周期aboutToAppear中，根据当前颜色模式刷新banner状态变量，切换不同的图片。
aboutToAppear(): void {
  if (this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK) {
    this.banner = $r("app.media.dark_mode_banner");
} else {
    this.banner = $r("app.media.light_mode_banner");
    // 在当前为浅色模式中，确保界面美观且颜色统一，设置导航栏的背景色。
    setStatusBar(ConfigurationConstant.ColorMode.COLOR_