论坛 › 鸿蒙 › HarmonyOS Next开辟学习手册——主题设置(设置主题换肤)

用多少眼泪才能让你相信 发表于 2025-1-9 19:34:36

HarmonyOS Next开辟学习手册——主题设置(设置主题换肤)

概述

针对应用，构建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')
   
    onWillApplyTheme(theme: Theme) {
      this.menuItemColor = theme.colors.backgroundPrimary;
    }

    build() {
      Column() {
      List({ space: 10 }) {
          ListItem() {
            Column({ space: '5vp' }) {
            Text('Color mode')
                .margin({ top: '5vp', left: '14fp' })
                .width('100%')
            Row() {
                Column() {
                  Text('Light')
                  .fontSize('16fp')
                  .textAlign(TextAlign.Start)
                  .alignSelf(ItemAlign.Center)
                  Radio({ group: 'light or dark', value: 'light' })
                  .checked(true)
                }
                .width('50%')

                Column() {
                  Text('Dark')
                  .fontSize('16fp')
                  .textAlign(TextAlign.Start)
                  .alignSelf(ItemAlign.Center)
                  Radio({ group: 'light or dark', value: 'dark' })
                }
                .width('50%')
            }
            }
            .width('100%')
            .height('90vp')
            .borderRadius('10vp')
            .backgroundColor(this.menuItemColor)
          }

          ListItem() {
            Column() {
            Text('Brightness')
                .width('100%')
                .margin({ top: '5vp', left: '14fp' })
            Slider({ value: 40, max: 100 })
            }
            .width('100%')
            .height('70vp')
            .borderRadius('10vp')
            .backgroundColor(this.menuItemColor)
          }

          ListItem() {
            Column() {
            Row() {
                Column({ space: '5vp' }) {
                  Text('Touch sensitivity')
                  .fontSize('16fp')
                  .textAlign(TextAlign.Start)
                  .width('100%')
                  Text('Increase the touch sensitivity of your screen' +
                  ' for use with screen protectors')
                  .fontSize('12fp')
                  .fontColor(Color.Blue)
                  .textAlign(TextAlign.Start)
                  .width('100%')
                }
                .alignSelf(ItemAlign.Center)
                .margin({ left: '14fp' })
                .width('75%')

                Toggle({ type: ToggleType.Switch, isOn: true })
                  .margin({ right: '14fp' })
                  .alignSelf(ItemAlign.Center)
                  .width('25%')
            }
            .width('100%')
            .height('80vp')
            }
            .width('100%')
            .borderRadius('10vp')
            .backgroundColor(this.menuItemColor)
          }
      }
      }
      .padding('10vp')
      .backgroundColor('#dcdcdc')
      .width('100%')
      .height('100%')
    }
}


[*]在Ability中设置 ThemeControl ，需要在onWindowStageCreate()方法中 setDefaultTheme 。
import AbilityConstant from '@ohos.app.ability.AbilityConstant';
import hilog from '@ohos.hilog';
import UIAbility from '@ohos.app.ability.UIAbility';
import Want from '@ohos.app.ability.Want';
import window from '@ohos.window';
import { CustomColors, ThemeControl } from '@kit.ArkUI';

class AppColors implements CustomColors {
    fontPrimary = 0xFFD53032
    iconOnPrimary = 0xFFD53032
    iconFourth = 0xFFD53032
}

const abilityThemeColors = new AppColors();

export default class EntryAbility extends UIAbility {
    onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
      hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
    }

    onDestroy() {
      hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
    }

    onWindowStageCreate(windowStage: window.WindowStage) {
      // Main window is created, set main page for this ability
      hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
   
      windowStage.loadContent('pages/Index', (err, data) => {
      if (err.code) {
          hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
          return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
      // 在onWindowStageCreate()方法中setDefaultTheme
      ThemeControl.setDefaultTheme({ colors: abilityThemeColors })
      hilog.info(0x0000, 'testTag', '%{public}s', 'ThemeControl.setDefaultTheme done');
      });
    }

}
https://i-blog.csdnimg.cn/blog_migrate/f8b0773b375a2ce19b96856084383549.png
注：假如setDefaultTheme的参数为undefined时，默认token值对应的色值参考 系统缺省token色值 。
设置应用局部页面自界说主题风格

将自界说Theme的配色通过设置 WithTheme 作用于内组件缺省样式，WithTheme作用域内组件配色跟随Theme的配色生效。
在下面示例中，通过WithTheme({ theme: this.myTheme })将作用域内的组件配色设置为自界说主题风格。后续可通过更改this.myTheme更换主题风格。
onWillApplyTheme 回调函数用于自界说组件获取当前生效的Theme对象。
import { CustomColors, CustomTheme, Theme } from '@kit.ArkUI'

class AppColors implements CustomColors {
    fontPrimary: ResourceColor = $r('app.color.brand_purple')
    backgroundEmphasize: ResourceColor = $r('app.color.brand_purple')
}

class AppColorsSec implements CustomColors {
    fontPrimary: ResourceColor = $r('app.color.brand')
    backgroundEmphasize: ResourceColor = $r('app.color.brand')
}

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

class AppThemeSec implements CustomTheme {
    public colors: AppColors = new AppColorsSec()
}

@Entry
@Component
struct DisplayPage {
    @State customTheme: CustomTheme = new AppTheme()
    @State message: string = '设置应用局部页面自定义主题风格'
    count = 0;

    build() {
      WithTheme({ theme: this.customTheme }) {
      Row(){
          Column() {
            Text('WithTheme')
            .fontSize(30)
            .margin({bottom: 10})
            Text(this.message)
            .margin({bottom: 10})
            Button('change theme').onClick(() => {
            this.count++;
            if (this.count > 1) {
                this.count = 0;
            }
            switch (this.count) {
                case 0:
                  this.customTheme = new AppTheme();
                  break;
                case 1:
                  this.customTheme = new AppThemeSec();
                  break;
            }
            })
          }
          .width('100%')
      }
      .height('100%')
      .width('100%')
      }
    }
}
https://i-blog.csdnimg.cn/blog_migrate/e4ef1476e1c214105f31947a2384097c.gif
设置应用页面局部深淡色

通过 WithTheme 可以设置深淡色模式， ThemeColorMode 有三种模式，ThemeColorMode.SYSTEM模式表现跟随系统模式，ThemeColorMode.LIGHT模式表现淡色模式，ThemeColorMode.DARK模式表现深色模式。
在WithTheme作用域内，组件的样式资源取值跟随指定的模式读取对应的深淡色模式系统和应用资源值，WithTheme作用域内的组件配色跟随指定的深浅模式生效。
在下面的示例中，通过WithTheme({ colorMode: ThemeColorMode.DARK })将作用域内的组件设置为深色模式。
设置局部深淡色时，需要在resources文件夹下添加dark目录，dark目录添加dark.json资源文件，深淡色模式才会生效。
@Entry
@Component
struct DisplayPage {
    @State message: string = 'Hello World';
    @State colorMode: ThemeColorMode = ThemeColorMode.DARK;

    build() {
      WithTheme({ colorMode: this.colorMode }) {
      Row() {
          Column() {
            Text(this.message)
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
            Button('Switch ColorMode').onClick(() => {
            if (this.colorMode === ThemeColorMode.LIGHT) {
                this.colorMode = ThemeColorMode.DARK;
            } else if (this.colorMode === ThemeColorMode.DARK) {
                this.colorMode = ThemeColorMode.LIGHT;
            }
            })
          }
          .width('100%')
      }
      .backgroundColor($r('sys.color.background_primary'))
      .height('100%')
      .expandSafeArea(, )
      }
    }
}
https://i-blog.csdnimg.cn/blog_migrate/ec768f22973bd11241e87490d8dfefcb.png
系统缺省token色值

https://i-blog.csdnimg.cn/blog_migrate/845c850a2dd17c6b522828bf2fd79741.png
鸿蒙全栈开辟全新学习指南

有许多小伙伴不知道学习哪些鸿蒙开辟技术？不知道需要重点掌握哪些鸿蒙应用开辟知识点？而且学习时频仍踩坑，最终浪费大量时间。以是要有一份实用的鸿蒙（HarmonyOS NEXT）学习路线与学习文档用来跟着学习是非常有必要的。
针对一些列因素，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开辟技术的学习路线，包含了鸿蒙开辟必掌握的核心知识要点，内容有（ArkTS、ArkUI开辟组件、Stage模子、多端部署、分布式应用开辟、WebGL、元服务、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开辟、系统定制移植等等）鸿蒙（HarmonyOS NEXT）技术知识点。
本路线共分为四个阶段：

第一阶段：鸿蒙初中级开辟必备技能

https://i-blog.csdnimg.cn/blog_migrate/25ffee0c08f3e3b6a285cdfd3bcf8b52.png#pic_center
第二阶段：鸿蒙南北双向高工技能基础：gitee.com/MNxiaona/733GH

https://i-blog.csdnimg.cn/blog_migrate/d40e254ad5298b1b9443673b5d2d65e8.png
第三阶段：应用开辟中高级就业技术

https://i-blog.csdnimg.cn/blog_migrate/12a1f73ec20d4dbfb00e81a12a8a3b80.png
第四阶段：全网首发-工业级南向装备开辟就业技术：gitee.com/MNxiaona/733GH

https://i-blog.csdnimg.cn/blog_migrate/4edc4135ad5e9589f07294c309fa6ceb.png
《鸿蒙 (Harmony OS)开辟学习手册》（共计892页）

如何快速入门？

1.基本概念
2.构建第一个ArkTS应用
3.……
https://i-blog.csdnimg.cn/blog_migrate/95c9d69bf2799d495b48ef0afdc3a6c3.png
开辟基础知识:gitee.com/MNxiaona/733GH

1.应用基础知识
2.设置文件
3.应用数据管理
4.应用安全管理
5.应用隐私掩护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……
https://i-blog.csdnimg.cn/blog_migrate/8a3c814f160a417762a1604f1100519b.png
基于ArkTS 开辟

1.Ability开辟
2.UI开辟
3.公共事件与关照
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.装备管理
12.装备使用信息统计
13.DFX
14.国际化开辟
15.折叠屏系列
16.……
https://i-blog.csdnimg.cn/blog_migrate/a7814f4329840186e6587683eb60ad61.png
鸿蒙开辟口试真题（含参考答案）:gitee.com/MNxiaona/733GH

https://i-blog.csdnimg.cn/blog_migrate/94175dfdc325a7ecd433aded1955becc.png
鸿蒙入门讲授视频：

https://i-blog.csdnimg.cn/blog_migrate/38afbec31737974e20ce0f81a3bf6bae.png
美团APP实战开辟讲授：gitee.com/MNxiaona/733GH

https://i-blog.csdnimg.cn/blog_migrate/b2f662b1d4999c82896fb019422e345d.png
写在末了



[*]假如你以为这篇内容对你还蛮有资助，我想邀请你帮我三个小忙：
[*]点赞，转发，有你们的 『点赞和批评』，才是我创造的动力。
[*]关注小编，同时可以期待后续文章ing

查看完整版本: HarmonyOS Next开辟学习手册——主题设置(设置主题换肤)