HarmonyOS 主题工具的实现（适用API12以上版本）

原创已于 2025-03-27 21:48:24 修改 · 675 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #鸿蒙 #华为

于 2025-03-27 21:43:39 首次发布

HarmonyOS

import { ConfigurationConstant } from "@kit.AbilityKit"

export const ColorModeKey = 'interview-color-mode'

class Theme {
  /**
   * 初始化(持久化)
   */
  initTheme(){
     // 1. 持久化到本地(没有则创建, 有则无变化)
     PersistentStorage.persistProp(ColorModeKey, ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT)
     // 2. 从本地读取颜色模式
     const colorMode = AppStorage.get<ConfigurationConstant.ColorMode>(ColorModeKey)

     // 3. 存到本地 和 设置颜色模式
     this.setTheme(colorMode!)
  }

  setTheme(mode: ConfigurationConstant.ColorMode){
    // 更新本地存储的颜色模式
    AppStorage.setOrCreate<ConfigurationConstant.ColorMode>(ColorModeKey, mode)
    // 设置系统的颜色模式
    const ctx = AppStorage.get<Context>('context')
    if(ctx){
      ctx.getApplicationContext().setColorMode(mode)
    }
  }

  /**
   * 跟随系统
   */
  noSet(){
    this.setTheme(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET)
  }


  /**
   * 设置深色
   */
  setDark(){
    this.setTheme(ConfigurationConstant.ColorMode.COLOR_MODE_DARK)
  }

  /**
   * 设置浅色
   */
  setLight(){
    this.setTheme(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT)
  }
}

export const theme = new Theme()

 onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
    logger.info('Ability onCreate')
    //全局存储上下文
    AppStorage.setOrCreate('context', this.context)
    this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_DARK)
  }

调用方法

目标：实现主题设置，默认是亮色主题，可设置暗色主题，可以设置跟随系统

实现步骤：

先让设置应用默认为亮色主题
实现跟随系统颜色和亮色主题切换，实现暗色主题和亮色主题切换
设置页显示是否开启暗黑模式

第一步：在首页

import { theme } from '../commons/utils'

theme.initTheme()

第二步：在弹窗页面接收系统状态

import { ColorModeKey } from "../commons/utils"

@StorageProp(ColorModeKey) colorMode: ConfigurationConstant.ColorMode =
    ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT
======================================================================================
//按钮
  Toggle({
          type: ToggleType.Switch,
          // 是否跟随系统模式
          isOn: this.colorMode === ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET
        })
          .onChange((val) => {
            if (val) {
              //TODO 跟随系统
              theme.noSet()
            } else {
              // TODO 默认亮色
              theme.setLight()
            }
          })
=====================================================================================
  //判断有没有开启跟随系统，跟随不开启，不跟随显示下面的选项
  if (this.colorMode !== ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET) {
  Row() {
          Text('普通模式')
          text('深色模式')
  }
}

第三步：设置里面显示已关闭和已开启

@StorageProp(ColorModeKey) colorMode: ConfigurationConstant.ColorMode =
    ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT

 value: this.colorMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK ? '已开启' : '已关闭',