HarmonyOS 全局样式替换

参考demo如下：

//theme.ets

export default class theme {
  //资源目录，将需要实现主题切换的资源变量存储在这
  current_mode: string = 'normal_mode'
  background_color:Resource = $r('app.color.background_light')
  background_img:Resource = $r('app.media.startIcon')


  //通过读取current mode实现在重启应用后可以保存应用主题数据
  constructor(current_mode: string) {
    switch (current_mode) {
      case 'dark_mode':
        this.background_color = $r('app.color.background_dark')
        this.background_img = $r('app.media.foreground')
        break;

      default:
        this.current_mode = 'normal_mode'
        this.background_color = $r('app.color.background_light')
        this.background_img = $r('app.media.startIcon')
        break;
    }
  }

  //通过不同的主题切换函数更改主题变量，并在外部通过Appstorage实现应用内共享和画面重现渲染
  dark_mode() {
    this.current_mode = 'dark_mode'
    this.background_color = $r('app.color.background_dark')
    this.background_img = $r('app.media.foreground')

  }

  normal_mode() {
    this.current_mode = 'normal_mode'
    this.background_color = $r('app.color.background_light')
    this.background_img = $r('app.media.startIcon')

  }
}

//Index.ets
//在pages中调用主题类中的资源变量：（简化版框架）
import { router } from '@kit.ArkUI';
import theme from '../untils/theme'
PersistentStorage.persistProp('current mode', 'normal_mode')

@Entry
@Component
struct Index {

  @StorageLink('current mode') current_mode: string = 'normal_mode'
  @StorageLink('main_theme') theme: theme = new theme(this.current_mode)
  build() {
    Column() {
      Button('dark_mode')
        .onClick(() => {
          this.theme.dark_mode() //调用主题类中的主题切换函数
          this.current_mode = 'dark_mode' //将当前主题状态持久化保存
        })

      Button('normal_mode')
        .onClick(() => {
          this.theme.normal_mode() //调用主题类中的主题切换函数
          this.current_mode = 'normal_mode' //将当前主题状态持久化保存
        })

      Button('跳转查看第二页')
        .onClick(() => {
          router.pushUrl({url:'pages/second'})
        })
    }
    .width('100%')
    .height('100%')
    .backgroundColor(this.theme.background_color)
    .backgroundImage(this.theme.background_img)
    .backgroundImageSize({width:'100%',height:'100%'})
  }
}

//second.ets
//在pages中调用主题类中的资源变量：（简化版框架）
import theme from '../untils/theme'
import { router } from '@kit.ArkUI'

PersistentStorage.persistProp('current mode', 'normal_mode')
@Entry
@Component
struct second {

  @StorageLink('current mode') current_mode: string = 'normal_mode'
  @StorageLink('main_theme') theme: theme = new theme(this.current_mode)
  build() {
    Column() {
      Button('返回')
        .onClick(() => {
          router.back()
        })

    }
    .width('100%')
    .height('100%')
    .backgroundColor(this.theme.background_color)
    .backgroundImage(this.theme.background_img)
    .backgroundImageSize({width:'100%',height:'100%'})
  }
}
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.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.