鸿蒙学习实战之路-Reader Kit适配深浅色模式最佳实践

最近好多朋友问我："西兰花啊，我用Reader Kit做的阅读器，咋不能跟着系统自动切换深色模式呢？晚上看小说眼睛都要瞎了！" 害，这问题可问对人了！咱们前面做的阅读器就像一辆没有自动大灯的车，现在终于要给它装个感光自动调节了～

今天这篇，我就手把手带你用Reader Kit适配深、浅色模式，教你怎么让你的阅读器跟着系统自动切换主题，全程不超过8分钟（不含下载时间）～

一、适配深、浅色模式的基本流程

咱们做这个功能，整个流程就像咱们装自动大灯的过程：

安装感光器（监听系统配置变化）
连接电路（通过AppStorage保存状态）
设置灯光模式（根据colorMode值切换主题）
测试效果（验证自动切换是否正常）

简单来说，就是监听系统的深色模式变化，然后根据变化切换咱们阅读器的主题，是不是超简单？^^

二、需要用到的接口

咱们做这个功能，主要需要用到几个接口，就像装自动大灯需要用到感光器、控制器一样：

接口名	描述
setPageConfig	设置或者修改页面排版属性，相当于大灯的控制开关，一按就能切换模式～
AppStorage	应用级别的状态管理，相当于电路的中间继电器，用来传递信号～
@StorageLink	装饰器，用于监听AppStorage中的状态变化，相当于大灯的接收器，收到信号就行动～

三、开发准备

在开始适配深、浅色模式之前，咱们需要做一些准备工作，就像装自动大灯前要先了解车的电路一样：

已经构建了阅读器：咱们需要先按照之前的教程构建一个基本的阅读器，就像要先有车才能装自动大灯一样～

四、具体实现步骤

1. 监听系统配置变化

首先，咱们需要在UIAbility中监听系统的配置变化，就像安装感光器一样，用来感知外界的光线变化：

typescript 复制代码

import { Configuration, UIAbility } from "@kit.AbilityKit";
export default class EntryAbility extends UIAbility {
  onConfigurationUpdate(newConfig: Configuration): void {
    AppStorage.setOrCreate("colorMode", newConfig.colorMode);
  }
}

这里咱们通过onConfigurationUpdate回调来监听系统配置的变化，当系统的深色模式发生变化时，咱们就把新的colorMode值保存到AppStorage中，这样其他组件就能知道系统的主题变化了。

2. 监听colorMode字段的变化

接下来，咱们需要在阅读页中监听colorMode字段的变化，就像连接电路一样，当感光器感知到光线变化时，就把信号传递给大灯：

typescript 复制代码

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);
}

这里咱们通过@StorageLink装饰器来监听AppStorage中的colorMode字段的变化，当它发生变化时，就会触发colorModeChange方法。在这个方法中，咱们根据当前的colorMode值来设置不同的主题：

当系统切换到深色模式时，咱们就把阅读器也设置为深色模式，字体颜色改为白色，背景色改为深灰色
当系统切换到浅色模式时，咱们就把阅读器也设置为浅色模式，字体颜色改为黑色，背景色改为白色

最后，咱们调用setPageConfig接口来重新渲染界面，让主题变化生效。

五、需要注意的地方

🥦 西兰花警告

初始状态的设置 ：咱们在设置colorMode的初始值时，要设置为COLOR_MODE_NOT_SET，这样系统才会根据实际的系统主题来进行初始化，就像自动大灯的初始状态要设置为自动模式一样，不然可能会出现主题不一致的情况～
主题色的搭配：咱们在设置深色模式的主题色时，要注意字体颜色和背景色的搭配，要保证文字的可读性，就像晚上开车时大灯的亮度要适中，不能太亮也不能太暗～
性能优化 ：咱们的colorModeChange方法会在每次系统主题变化时被调用，所以里面的逻辑要尽量简单，不要做太多耗时的操作，就像自动大灯的反应速度要快，不然光线变化了灯还没反应过来～

🥦 西兰花小贴士

用户手动切换：除了跟着系统自动切换，咱们还可以给用户提供一个手动切换主题的开关，就像自动大灯也有手动模式一样，这样用户就可以根据自己的喜好来选择主题了～
保存用户偏好：咱们可以把用户手动选择的主题偏好保存到本地，下次打开应用时优先使用用户的偏好设置，就像自动大灯会记住用户的设置一样，这样用户体验会更好～
更多主题：除了深、浅色模式，咱们还可以提供更多的主题选择，比如护眼模式、 sepia 模式等，就像汽车的大灯有不同的模式一样，满足不同用户的需求～

六、下一步行动

现在咱们已经学会了如何适配深、浅色模式，接下来可以试试：

实现手动切换主题的功能，让用户可以根据自己的喜好选择主题
实现更多的主题模式，比如护眼模式、 sepia 模式等
结合之前学的自定义字体和自定义页面背景，打造更加个性化的阅读体验

📚 推荐资料

我是盐焗西兰花，

不教理论，只给你能跑的代码和避坑指南。

下期见！🥦