常见网站架构施工企业安全培训
注：适用版本（Harmony OS NEXT / 5.0 / API 12+ ）
一、效果展示
二、技术栈
-
HarmonyOS ArkUI框架
使用AppStorage实现跨组件状态管理，PersistentStorage持久化存储用户偏好。 -
系统配置常量
ConfigurationConstant.ColorMode定义系统支持的颜色模式（浅色/深色/未设置）。 -
UIAbility上下文
通过common.UIAbilityContext获取应用上下文，调用setColorMode同步系统级主题配置。 -
TypeScript
强类型定义（如ColorModeKey常量、泛型方法persistProp<T>）提升代码健壮性。
| 技术组件 | 作用 | 原理 |
|---|---|---|
| PersistentStorage | 持久化存储键值对数据，适用于高频访问的小数据量场景 | 底层使用轻量级数据库，以实现数据的持久化存储 |
| AppStorage | 作为全局状态管理中心，支持组件数据的自动刷新 | 采用发布 - 订阅模式，组件通过 @StorageLink 绑定数据，当数据更新时，绑定的组件会自动刷新 |
| UIAbilityContext | 提供应用运行时的上下文信息，并允许修改系统级配置 | 在应用运行时提供相关上下文信息，如 config.colorMode，同时具备修改系统级配置的能力 |
| ConfigurationConstant | 提供系统常量，确保与HarmonyOS 原生行为一致 |
三、详细源码及分析
// 导入AbilityKit模块中的ConfigurationConstant和Context类
import { common, ConfigurationConstant, Context } from '@kit.AbilityKit'// 定义ColorModeKey常量，用于存储颜色模式的键值
export const ColorModeKey = 'hm_colorMode_key'// 定义Theme类，用于管理应用的主题
class Theme {// 初始化主题方法initTheme() {// 使用PersistentStorage持久化存储颜色模式，默认为浅色模式PersistentStorage.persistProp<ConfigurationConstant.ColorMode>(ColorModeKey,ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT)// 从AppStorage中获取当前的颜色模式const colorMode = AppStorage.get<ConfigurationConstant.ColorMode>(ColorModeKey)// 调用setTheme方法设置主题this.setTheme(colorMode!)}// 设置主题方法setTheme(model: ConfigurationConstant.ColorMode) {// 将颜色模式存储到AppStorage中AppStorage.setOrCreate(ColorModeKey, model)// 从AppStorage中获取上下文对象const ctx = AppStorage.get<Context>('context')AppStorage.setOrCreate('isDark',(ctx as common.UIAbilityContext).config.colorMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK)// 如果上下文对象存在，则设置应用的颜色模式if (ctx) {ctx.getApplicationContext().setColorMode(model)}}// 设置主题为未设置状态的方法noSet() {this.setTheme(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET)}// 设置主题为浅色模式的方法light() {this.setTheme(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT)}// 设置主题为深色模式的方法dark() {this.setTheme(ConfigurationConstant.ColorMode.COLOR_MODE_DARK)}
}// 导出Theme类的实例
export const theme = new Theme()
initTheme方法
功能：对主题进行初始化操作。
步骤：
运用
PersistentStorage.persistProp方法把默认的颜色模式（浅色模式）持久化存储起来。从
AppStorage中获取当前的颜色模式。调用
setTheme方法来设置主题。
setTheme方法
功能：设置应用的主题。
步骤：
把传入的颜色模式存储到
AppStorage里。从
AppStorage中获取上下文对象ctx。依据上下文对象的颜色模式，在
AppStorage中设置isDark标志。若上下文对象存在，就调用
getApplicationContext().setColorMode方法来设置应用的颜色模式。
noSet、light和dark方法
功能：分别把主题设置为未设置、浅色和深色模式。
实现方式：调用
setTheme方法并传入对应的颜色模式常量。
四、常见问题
持久化存储未初始化
现象：首次启动时主题未按预期加载。
解决：确保
initTheme()在应用启动时调用，且PersistentStorage.persistProp优先于其他逻辑。上下文获取失败
现象：
ctx为undefined，调用setColorMode报错。解决：检查
AppStorage中context是否正确注入，或通过getContext动态获取。颜色模式未同步
现象：
AppStorage与系统实际模式不一致。解决：在
setTheme中显式调用ctx.getApplicationContext().setColorMode(model)，并监听系统配置变化。枚举值误用
现象：错误使用
COLOR_MODE_NOT_SET导致主题异常。解决：仅在需要系统默认行为时使用
noSet()，通常应明确指定LIGHT或DARK。异步存储延迟
现象：主题切换后界面未立即刷新。
解决：使用
@StorageLink装饰器绑定UI组件，或手动触发getUIAbilityContext().setColorMode()。
五、总结
通过合理封装 HarmonyOS 原生 API，开发者可以轻松实现动态主题管理功能。本文的 Theme 工具类提供了一套完整的解决方案，涵盖持久化存储、系统配置同步与常见问题规避。在实际开发中，建议结合业务需求扩展主题体系，并始终关注上下文有效性及状态同步的原子性。