目录

适配深、浅色模式

当应用需要根据设备的深、浅色模式变化动态切换主题时，开发者可通过UIAbility的onConfigurationUpdate回调判断模式的变化，然后设置模式对应的字体颜色及背景色。

接口说明

适配深、浅色主题主要涉及1个接口，具体介绍如下表所示。

接口名 描述
setPageConfig(pageConfig: ReaderSetting): void 设置或者修改页面排版属性。

开发准备

在适配深、浅色主题之前，请先确保已经“构建阅读器”。

开发步骤

  1. 监听UIAbility的onConfigurationUpdate回调，并通过应用级变量的状态管理AppStorage保存当前colorMode值。

    import { Configuration, UIAbility } from '@kit.AbilityKit';

export default class EntryAbility extends UIAbility {

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

  2. 阅读页通过@StorageLink装饰器监听colorMode字段的变化。如果颜色变化，则触发对应主题色的变更。

    import { ConfigurationConstant } from '@kit.AbilityKit';

@StorageLink('colorMode') @Watch('colorModeChange') colorMode: ConfigurationConstant.ColorMode =
  ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET;

/**
 * 系统深色模式变化，可以重新设置主题
 */
colorModeChange() {
  if (this.colorMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK) {
    this.readerSetting.nightMode = true;
    this.readerSetting.fontColor = '#ffffff';
    this.readerSetting.themeColor = '#202224';
  } else {
    this.readerSetting.nightMode = false;
    this.readerSetting.fontColor = '#000000';
    this.readerSetting.themeColor = '#FFFFFF';
  }
  this.readerComponentController.setPageConfig(this.readerSetting);
}