# ArkTheme

**Repository Path**: goweii/ArkTheme

## Basic Information

- **Project Name**: ArkTheme
- **Description**: ArkUI 动态主题框架，无需重建 Ability 即可动态切换主题。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-03-05
- **Last Updated**: 2024-03-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ArkTheme

ArkUI 动态主题框架，无需重建 Ability 即可动态切换主题。

## 下载安装

```shell
ohpm install @goweii/theme
```

OpenHarmony ohpm 环境配置等更多内容，请参考[如何安装 OpenHarmony ohpm 包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.md)

## 使用说明

详见[示例工程](https://gitee.com/goweii/ArkTheme/tree/main/entry/src/main/ets)

### 1. 初始化

```ets
export default class YourAbilityStage extends AbilityStage {
  onCreate() {
    // [必须] 初始化
    ThemeManager.init(this.context);
  }
}
```

### 2. 加载用户设置的主题

```ets
export default class YourAbilityStage extends AbilityStage {
  onCreate() {
    ThemeManager.init(this.context);

    // [可选] 加载用户设置的主题
    this.loadSavedTheme();
  }
  
  async loadSavedTheme() {
    let prefs = await preferences.getPreferences(this.context, 'theme');
    let savedThemeMode: ThemeMode | undefined = await prefs.get('mode', '')
      .then((data) => {
        if (ThemeMode.light == data) {
          return ThemeMode.light;
        } else if (ThemeMode.dark == data) {
          return ThemeMode.dark;
        }
        return undefined;
      });

    let savedThemeLight: ThemeData | undefined = await prefs.get('light', '')
      .then((data) => {
        let json = data as string;
        if (json.length > 0) {
          let obj = JSON.parse(json)
          return ThemeStorage.theme.light.copyFromJson(obj)
        }
        return undefined;
      });

    let savedThemeDark: ThemeData | undefined = await prefs.get('dark', '')
      .then((data) => {
        let json = data as string;
        if (json.length > 0) {
          let obj = JSON.parse(json)
          return ThemeStorage.theme.dark.copyFromJson(obj)
        }
        return undefined;
      });

    if (savedThemeMode || savedThemeLight || savedThemeDark) {
      ThemeStorage.theme = ThemeStorage.theme.copyWith({
        mode: savedThemeMode,
        light: savedThemeLight,
        dark: savedThemeDark,
      });
    }
  }
}
```

### 3. 使用主题

```ets
@Entry
@Component
struct Index {
  @StorageLink('theme') theme: Theme = ThemeStorage.theme;

  build() {
    Column() {
      Text('Hello\nArkTheme')
        .fontSize(64)
        .fontColor(this.theme.current.colorScheme.onPrimary.value)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .backgroundColor(this.theme.current.colorScheme.primary.value)
  }
}
```