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%'})
  }
}