【鸿蒙实战开发】ArkUI-设置主题换肤

原创

于 2024-08-11 20:05:53 发布 · 1.1k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为 #ui #鸿蒙 #android

概述

针对应用，构建ArkUI应用级和页面级主题设置能力，并提供局部深浅色模式设置、动态换肤等功能。

本文提供如下场景：

自定义品牌色
应用级自定义品牌色
局部页面自定义主题风格
局部深浅色

自定义品牌色

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')
    
    onWillApplyT