鸿蒙开发里，如何实现应用的主题切换功能，如白天和黑夜模式？

// resources/base/element/color.json
{
  "color": [
    {
      "name": "background_color",
      "value": "#FFFFFF" // 默认白天模式
    },
    {
      "name": "text_color",
      "value": "#000000"
    }
  ]
}

// resources/dark/element/color.json（黑夜模式）
{
  "color": [
    {
      "name": "background_color",
      "value": "#000000"
    },
    {
      "name": "text_color",
      "value": "#FFFFFF"
    }
  ]
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.

// 定义主题类型
type ThemeMode = 'light' | 'dark';

// 初始化默认主题
AppStorage.SetOrCreate<ThemeMode>('currentTheme', 'light');
1.
2.
3.
4.
5.

@Entry
@Component
struct HomePage {
  // 监听主题变化
  @StorageLink('currentTheme') currentTheme: ThemeMode = 'light';

  build() {
    Column() {
      Text('Hello, HarmonyOS')
        .fontColor($r('app.color.text_color')) // 动态绑定颜色
        .fontSize(20)
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.background_color')) // 动态背景色
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

// 切换主题的按钮组件
@Component
struct ThemeToggle {
  @StorageLink('currentTheme') currentTheme: ThemeMode = 'light';

  build() {
    Button(this.currentTheme === 'light' ? '切换黑夜模式' : '切换白天模式')
      .onClick(() => {
        this.currentTheme = this.currentTheme === 'light' ? 'dark' : 'light';
      })
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

import { Configuration } from '@ohos.application.Configuration';

// 获取系统主题
const systemTheme: ThemeMode = Configuration.getGlobalConfiguration().colorMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK ? 'dark' : 'light';

// 监听系统主题变化
Configuration.on('configurationChange', (config) => {
  const newTheme = config.colorMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK ? 'dark' : 'light';
  AppStorage.Set<ThemeMode>('currentTheme', newTheme);
});
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

@Component
struct AnimatedThemePage {
  @StorageLink('currentTheme') currentTheme: ThemeMode;

  build() {
    Stack() {
      // 页面内容
    }
    .animation({ duration: 300, curve: Curve.EaseInOut }) // 平滑过渡动画
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.