【鸿蒙基于API 13实战开发】—— 应用内主题换肤

---

📚鸿蒙开发往期学习笔录✒️：

✒️ 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
✒️ 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
✒️ 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
✒️ 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
✒️ 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
✒️ 记录一场鸿蒙开发岗位面试经历~
✒️ 持续更新中……

---

概述

对于采用ArkTS开发的应用，提供了应用内组件的主题换肤功能，支持局部的深浅色切换及动态换肤。目前，该功能只支持设置应用内主题换肤，暂不支持在UIAbility或窗口层面进行主题设置，同时也不支持C-API和Node-API。

自定义主题色

当应用需要使用换肤功能时，应自定义主题颜色。 CustomTheme 用于自定义主题色的内容，其属性可选，仅需要复写需修改的部分，未修改内容将继承系统默认设置，可参考 系统默认的token颜色值 。请参照以下示例自定义主题色：

  import { CustomColors, CustomTheme } from '@kit.ArkUI'

  export class AppColors implements CustomColors {
    //自定义主题色
    brand: ResourceColor = '#FF75D9';
  }

  export class AppTheme implements CustomTheme {
    public colors: AppColors = new AppColors()
  }
  
  export let gAppTheme: CustomTheme = new AppTheme()

设置应用内组件自定义主题色

• 可以在页面入口处统一设置应用内组件自定义主题色，但需确保在页面build前执行 ThemeControl 。

  其中， onWillApplyTheme 回调函数用于使自定义组件获取当前生效的Theme对象。

  import { Theme, ThemeControl } from '@kit.ArkUI'
  import { gAppTheme } from './AppTheme'
  
  //在页面build前执行ThemeControl
  ThemeControl.setDefaultTheme(gAppTheme)

  @Entry
  @Component
  struct DisplayPage {
    @State menuItemColor: ResourceColor = $r('sys.color.background_primary')
    
    onWillApplyTheme(theme: Theme) {
      this.menuItemColor = theme.colors.backgr