如何动态更换主题颜色？

【解决方案】
使用ArkUI主题资源+状态变量，可以实现主题自由切换。具体方案如下：

1. 定义主题资源resources/base/element/color.json：

   收起

   自动换行

   深色代码主题

   复制

   {
     "color": [
       {
         "name": "start_window_background",
         "value": "#FFFFFF"
       },
       {
         "name": "primary_text",
         "value": "#FF000000"
       },
       {
         "name": "dark_primary_text",
         "value": "#FFFFFFFF"
       },
       {
         "name": "dark_primary_bg",
         "value": "#FF222222"
       },
       {
         "name": "primary_bg",
         "value": "#FFFFFFFF"
       }
     ]
   }
   

2. 编写UI组件页面，验证页面主题切换：

   收起

   自动换行

   深色代码主题

   复制

   import { ThemeManager } from './ThemeManager';
   
   const KEY_IS_DARK: string = "isDarkTheme";
   
   @Entry
   @Component
   struct Index {
     // 绑定全局主题状态
     @StorageLink(KEY_IS_DARK) isDark: boolean = false;
   
     build() {
       Column() {
         // 示例1：文本动态颜色
         Text("主要内容")
           .fontColor(this.isDark ? $r("app.color.dark_primary_text") : $r("app.color.primary_text"))
           .fontSize(20)
         // 示例2：按钮切换主题
         Button(this.isDark ? "切换浅色" : "切换深色")
           .onClick(() => ThemeManager.toggleTheme())
       }
       .width('100%')
       .height('100%')
       .backgroundColor(this.isDark ? $r("app.color.dark_primary_bg") : $r("app.color.primary_bg"))
     }
   }

3. 定义主题管理工具类，实现主题切换功能：

   收起

   自动换行

   深色代码主题

   复制

   const KEY_IS_DARK: string = "isDarkTheme";
   
   export class ThemeManager {
     // 初始化默认主题
     static init() {
       if (!AppStorage.has(KEY_IS_DARK)) {
         AppStorage.setOrCreate(KEY_IS_DARK, false);
       }
     }
   
     // 切换主题
     static toggleTheme() {
       AppStorage.set(KEY_IS_DARK, !AppStorage.get(KEY_IS_DARK));
     }
   
     // 获取当前主题
     static get isDark(): boolean {
       return AppStorage.get(KEY_IS_DARK) || false;
     }
   }
   
   ThemeManager.init();

4. 主题深浅模式切换效果如下：

   浅色：

   

   深色：

   

主题换肤参考这个：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-theme-V5#themecontrol

Demo如下：

import { CustomTheme, CustomColors, ThemeControl } from '@kit.ArkUI';
// 自定义主题颜色
class BlueColors implements CustomColors {
  fontPrimary = Color.Red;
  backgroundPrimary = Color.Red;
  brand = Color.Blue; //品牌色
}

class PageCustomTheme implements CustomTheme {
  colors?: CustomColors;

  constructor(colors: CustomColors) {
    this.colors = colors;
  }
}
// 创建实例
const BlueColorsTheme = new PageCustomTheme(new BlueColors());

@Entry
@Preview
@Component
struct ExampleComponent {
  @State counter: number = 0;
  @State userName: string = "HongMeng";

  build() {
    Column() {

      Text(`Counter: ${this.counter}`)
        .fontSize(24)
        .margin(10);

      Button("Change")
        .onClick(() => {
          this.counter += 1;
          // 在页面build之前执行ThemeControl.setDefaultTheme，设置App默认样式风格为BlueColorsTheme。
          ThemeControl.setDefaultTheme(BlueColorsTheme);
        })
        .margin(10);
    }
  }
}