基于原生的应用主题开发

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; 
import { hilog } from '@kit.PerformanceAnalysisKit'; 
import { window, CustomColors, ThemeControl } from '@kit.ArkUI'; 
 
class RedColors implements CustomColors { 
  fontEmphasize = 0xFFD53032 
  iconEmphasize = 0xFFD53032 
  backgroundEmphasize = 0xFFD53032 
} 
 
const abilityThemeColors = new RedColors(); 
 
export default class EntryAbility extends UIAbility { 
  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) ?? ''); 
      // invoking here works good 
      ThemeControl.setDefaultTheme({ 
        colors: abilityThemeColors 
      }) 
      hilog.info(0x0000, 'testTag', '%{public}s', 'ThemeControl.setDefaultTheme done'); 
    }); 
  } 
}

// xxx.ets 
import { CustomColors, CustomTheme } from '@ohos.arkui.theme' 
 
export class AppColors implements CustomColors { 
  fontPrimary: ResourceColor = '#6A3E80' 
  fontOnPrimary: ResourceColor = '#FDECFF' 
  iconOnPrimary: ResourceColor = '#FDECFF' 
  iconFourth: ResourceColor = '#336A3E80' 
  compBackgroundTertiary: ResourceColor = '#Oc9162A8' 
  compBackgroundEmphasize: ResourceColor = '#FF75D9' 
  backgroundEmphasize: ResourceColor = '#FF75D9' 
  interactiveFocus: ResourceColor = '#FF75D9' 
  compBackgroundPrimary: ResourceColor = '#FFF1FB' 
  compBackgroundSecondary: ResourceColor = '#199162A8' 
} 
 
export class CustomTheme1 implements CustomTheme { 
} 
 
export let gCustomTheme1: CustomTheme = new CustomTheme1() 
 
export class AppTheme implements CustomTheme { 
  public colors: AppColors = new AppColors() 
} 
 
export let gAppTheme: CustomTheme = new AppTheme()
// xxx.ets 
import { ThemeControl } from '@ohos.arkui.theme' 
import { gAppTheme } from './AppTheme' 
 
// 在页面build前执行ThemeControl，就可以改变主题颜色 
ThemeControl.setDefaultTheme(gAppTheme) 
 
@Entry 
@Component 
struct DisplayPage { 
  build() { 
    // 开发者需要自己补充的主题代码 
  } 
}

// xxx.ets 
import { CustomTheme } from '@ohos.arkui.theme' 
import { CustomTheme1, gAppTheme, gCustomTheme1 } from './AppColors' 
import { promptAction } from '@kit.ArkUI' 
import { BusinessError } from '@kit.BasicServicesKit' 
 
@Entry 
@Component 
struct DisplayPage { 
  fontPrimary: ResourceColor | undefined = gAppTheme?.colors?.fontPrimary 
  @State myTheme: CustomTheme = gAppTheme 
  @State isCustomTheme:boolean = false; 
  build() { 
    WithTheme({ theme: this.myTheme }) { 
      Column() { 
        Button('SwitchColors') 
          .onClick(()=>{ 
            this.isCustomTheme = !this.isCustomTheme 
            if(this.isCustomTheme){ 
              this.myTheme = gCustomTheme1 
              try { 
                promptAction.showToast({ 
                  message: '系统默认主题色', 
                  duration: 1000 
                }); 
              } catch (error) { 
                let message = (error as BusinessError).message 
                let code = (error as BusinessError).code 
                console.error(`showToast args error code is ${code}, message is ${message}`); 
              }; 
            } else { 
              this.myTheme = gAppTheme 
              try { 
                promptAction.showToast({ 
                  message: '自定义主题色', 
                  duration: 1000 
                }); 
              } catch (error) { 
                let message = (error as BusinessError).message 
                let code = (error as BusinessError).code 
                console.error(`showToast args error code is ${code}, message is ${message}`); 
              }; 
            } 
          }) 
        // 开发者需要自己补充的主题代码 
      } 
      .padding('10vp') 
      .backgroundColor(this.pageBackgroundColor) 
      .width('100%') 
      .height('100%') 
    } 
  } 
}