HarmonyOS开发者社区

深色模式适配是多设备应用的标配需求。鸿蒙ArkTS提供了三层适配方案。第一层（推荐）：使用资源限定词目录——在resources目录下创建dark/element/color.json，定义与base/element相同名称的颜色资源，系统根据主题自动选择，零代码侵入。第二层：使用@StorageLink监听主题变化，在根组件中响应并刷新UI。第三层：通过Configuration的onConfigurationUpdate获取uiMode配置，发送事件通知页面刷新。建议优先使用资源限定词方案，性能最优。如需运行时动态切换主题（如用户手动选择），则需要结合第二层或第三层方案，将主题模式写入AppStorage，所有页面通过@StorageProp读取主题值，配合@Builder的动态切换实现全局换肤。

// 方案一：资源限定词目录结构
resources/
├── base/element/color.json // 默认浅色主题
│ { "color": [{ "name": "bg_main", "value": "#FFFFFF" }] }
└── dark/element/color.json // 深色主题
{ "color": [{ "name": "bg_main", "value": "#1A1A1A" }] }

// 代码中使用，系统自动适配
Column() { Text('内容') }
.backgroundColor($r('app.color.bg_main'))

// 方案二：运行时动态切换主题
@Entry
@Component
struct AppRoot {
@StorageLink('themeMode') themeMode: string = 'light';
build() {
Column() {
if (this.themeMode === 'light') { LightThemeContent() }
else { DarkThemeContent() }
}
}
}

// 切换主题的函数
function switchTheme(mode: string) {
AppStorage.setOrCreate('themeMode', mode);
}