HarmonyOS换肤方案有哪些？

HarmonyOS目前有没推荐的换肤方案？包括：颜色，字体，图片资源等，包括暗黑模式。

在实现换肤的时候有两种思路：

1. 把系统控件封装起来，开发者使用自己封装过的控件但这种侵入式很强。

2. 系统提供灵活hook，或者其他机制，这样达到哪怕直接使用系统的控件，也能灵活适配换肤。那么在HarmonyOS上，如何实现？

HarmonyOS

put_get

2024-09-29 11:47:10

浏览

回答 1

按赞同

按时间

superinsect

创建主题类来实现主题切换代码如下：首先创建一个主题类 “theme”,下面是代码的主题框架（具体代码有所简化）

export default class theme  
{  
  //资源目录，将需要实现主题切换的资源变量存储在这  
  current_mode : string = 'normal_mode'  
  earphone_icon: Resource = $r('app.media.ic_device_earphone_hero_filled')  
 //通过读取current mode实现在重启应用后可以保存应用主题数据  
  constructor(current_mode : string) {  
    switch (current_mode) {  
      case 'normal_mode':  
        this.background_color = $r('app.color.background')  
        this.text_color = $r('app.color.brown')  
        this.phone_icon = $r('app.media.dialer')  
        break;  
      case 'color_mode':  
        this.background_color = $r('app.color.color_background')  
        this.text_color = $r('app.color.yellow')  
        this.phone_icon = $r('app.media.pwcall')  
       break;  
      case 'simple_mode':  
        this.background_color = $r('app.color.white')  
        this.text_color = $r('app.color.black')  
        this.phone_icon = $r('app.media.simplicityCall')  
      break;  
      default:  
        this.current_mode = 'normal_mode'  
        this.background_color = $r('app.color.background')  
        this.text_color = $r('app.color.brown')  
        break;  
    }  
  }  
//通过不同的主题切换函数更改主题变量，并在外部通过Appstorage实现应用内共享和画面重现渲染  
  light_mode()  
  {  
    this.font_color= $r('app.color.black')  
    this.background_color= $r('app.color.white')  
    this.earphone_icon = $r('app.media.ic_device_earphone_hero_filled')  
  }  
  dark_mode()  
  {  
    this.font_color= $r('app.color.white')  
    this.background_color= $r('app.color.background')  
    this.earphone_icon = $r('app.media.ic_device_earphone_hero')  
  }  
  normal_mode()  
  {  
    this.current_mode = 'normal_mode'  
    this.background_color = $r('app.color.background')  
    this.text_color = $r('app.color.brown')  
  }  
  color_mode()  
  {  
    this.current_mode = 'color_mode'  
    this.background_color = $r('app.color.color_background')  
    this.text_color = $r('app.color.yellow')  
  }  
  simple_mode()  
  {  
    this.current_mode = 'simple_mode'  
    this.background_color = $r('app.color.white')  
    this.text_color = $r('app.color.black')  
  }  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.

在pages中调用主题类中的资源变量：（简化版框架）

import theme from '../pages/theme'  
PersistentStorage.persistProp('current mode', 'normal_mode')  
@Entry  
@Component  
struct Theme_setting {  
  @StorageLink('current mode') current_mode: string = 'normal_mode'  
  @StorageLink('main_theme') theme: theme = new theme(this.current_mode)  
  @StorageLink('gray mode') gray_mode: number = 0;  
  build() {  
    Column() {  
        Column() {  
          Image(this.theme.phone_icon).objectFit(ImageFit.Contain)  
          Text('电话').fontColor(this.theme.text_color)  
          Image(this.theme.camera_icon).objectFit(ImageFit.Contain)  
          Text('相机').fontColor(this.theme.text_color)  
        }.width('22%').height(90)  
      Image($r('app.media.find_service')).objectFit(ImageFit.Contain).height(200)  
    }  
    .grayscale(this.gray_mode)  
    .height('100%').backgroundColor(this.theme.background_color)  
  }  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

首先引用主题类：

import theme from '../pages/theme'1.

将主题状态持久化：

PersistentStorage.persistProp('current mode', 'normal_mode')1.

AppStorage生成主题类实例，并实现应用内共享，重新渲染：

@StorageLink('current mode') current_mode: string = 'normal_mode'   
@StorageLink('main_theme') theme: theme = new theme(this.current_mode) 1.
2.

在text，image等组件，或者背景中使用主题内的资源：

Image(this.theme.setting_icon)   
Text('设置').fontColor(this.theme.text_color) 1.
2.

在page中切换主题：

Button('normal mode')  
  .fontColor(this.theme.text_color)  
  .onClick(() => {  
    this.theme.normal_mode() //调用主题类中的主题切换函数  
    this.current_mode = 'normal_mode'//将当前主题状态持久化保存1.
2.
3.
4.
5.

2024-09-29 16:06:32

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS换肤方案有哪些？

订阅鸿蒙技术特刊，精选内容抢先看