HarmonyOS鸿蒙Next中Ability如何响应系统深色模式切换而不重启？

开发者你好，

可尝试以下深色模式切换，编辑内容不会丢失，如果不能满足，可提供具体复现demo，以便分析。

【背景知识】

• ComponentContent：ComponentContent表示组件内容的实体封装，其对象支持在非UI组件中创建与传递，便于开发者对弹窗类组件进行解耦封装。ComponentContent底层使用了BuilderNode，相关使用规格参考BuilderNode。
• updateConfiguration：传递系统环境变化事件，触发节点的全量更新。

【解决方案】

1. 使用ApplicationContext.setColorMode()方法存储当前颜色模式；
2. 通过@Watch监听onColorModeChange()方法中的深浅模式的切换；
3. 调用updateConfiguration()方法触发节点更新；
4. 最后执行onConfigurationUpdate()方法更新存储中的当前颜色模式。

详情请参考如下代码：

// Index.ets
import { ComponentContent, window } from '@kit.ArkUI'; 
import { customDialogBuilder } from './TestView';
import { ConfigurationConstant } from '@kit.AbilityKit'; 

const componentContentMap: Array<ComponentContent<[Object]>> = new Array(); // 初始化组件内容映射数组

@Entry
@Component
struct Index {
  @StorageProp('currentColorMode') [@Watch](/user/Watch)('onColorModeChange') currentMode: number =
    ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT; // 监听当前颜色模式并初始化为LIGHT模式
  // 监听颜色模式变化
  onColorModeChange(): void {
    componentContentMap.forEach((value, index) => {
      // 更新每个组件内容的配置
      value.updateConfiguration();
    });
  }

  build() {
    Row() {
      Column({ space: 20 }) {
        Button('打开自定义弹窗')
          .fontSize(20)
          .onClick(async () => {
            const lastWindow = await window.getLastWindow(getHostContext());
            const uiContext = lastWindow.getUIContext();
            // 创建一个新的组件内容对象
            const componentContent = new ComponentContent(
              uiContext,
              wrapBuilder(customDialogBuilder)
            );
            // 将新的组件内容添加到映射数组中
            componentContentMap.push(componentContent);
            uiContext.getPromptAction().openCustomDialog(componentContent);
          });
      }
      .width('100%')
    }
    .height('100%')
  }
}

// EntryAbility.ets
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
    // 设置存储中的当前颜色模式
    AppStorage.setOrCreate('currentColorMode', this.context.config.colorMode);
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }

  onConfigurationUpdate(newConfig: Configuration): void {
     // 更新存储中的当前颜色模式
    AppStorage.setOrCreate('currentColorMode', newConfig.colorMode);
    hilog.info(0x0000, 'testTag', 'the newConfig.colorMode is %{public}s',
      JSON.stringify(AppStorage.get('currentColorMode')) ?? '');
  }

// TestView.ets
@Builder
export function customDialogBuilder() {
  customDialogComponent()
}

@Component
struct customDialogComponent {
  build() {
    Column() {
      Text('深浅模式测试')
        .fontSize(30)
        .fontColor($r('app.color.fontColor'))
    }
    .height(200)
    .padding(5)
    .justifyContent(FlexAlign.SpaceBetween)
    .backgroundColor($r('app.color.backColor'))
  }
}