Dark Mode Status Bar, Span Combination with Different Font Sizes, Font Modification, Image Component Color Adjustment

【Daily HarmonyOS Next Knowledge】Dark Mode Status Bar, Span Combination with Different Font Sizes, Font Modification, Image Component Color Adjustment, Founder Fonts

1. HarmonyOS Status bar information (time, battery, etc.) invisible after enabling dark mode?

import { AbilityConstant, Configuration, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

export default class EntryAbility extends UIAbility {
  colorMode: number | undefined = 0

  onConfigurationUpdate(newConfig: Configuration): void {
    this.colorMode = newConfig.colorMode
    let windowStage: window.WindowStage | undefined = AppStorage.get('windowStage')
    if (windowStage !== undefined) {
      this.changeColor(windowStage)
    }
  }


  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
    this.colorMode = this.context.config.colorMode
  }

  onDestroy(): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
  }

  changeColor(windowStage: window.WindowStage) {
    let windowClass: window.Window | null
    windowStage.getMainWindow((err: BusinessError, data) => {
      let errCode: number = err.code;
      if (errCode) {
        console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err));
        return;
      }
      windowClass = data;
      console.info('Succeeded in obtaining the main window. Data: ' + JSON.stringify(data));

      let sysBarProps: window.SystemBarProperties = {
        statusBarColor: this.colorMode === 0 ? '#aa00ff0b' : '#ff00ff',
        navigationBarColor: '#00ff00',
        // The following two properties are supported from API Version 8
        statusBarContentColor: this.colorMode === 0 ? '#aaff0000' : '#ff002aff',
        navigationBarContentColor: '#ffffff'
      };
      windowClass.setWindowSystemBarProperties(sysBarProps, (err: BusinessError) => {
        let errCode: number = err.code;
        if (errCode) {
          console.error('Failed to set the system bar properties. Cause: ' + JSON.stringify(err));
          return;
        }
        console.info('Succeeded in setting the system bar properties.');
      });
    })
  }


  onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
    AppStorage.setOrCreate('windowStage', windowStage)

    this.changeColor(windowStage)

    windowStage.loadContent('pages/Index', (err) => {
      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.');
    });


  }

  onWindowStageDestroy(): void {
    // Main window is destroyed, release UI related resources
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground(): void {
    // Ability has brought to foreground

    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground(): void {
    // Ability has back to background
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}

2. How to align multiple Spans with different font sizes to the top in HarmonyOS?

When handling complex text scenarios, multiple Spans and ImageSpans need to be combined. However, consecutive Spans with different font sizes are currently aligned to the bottom. How to set top alignment?

Currently, the Span in Text does not support alignment properties. If this requirement exists, you can use a Row containing multiple Text components and set alignment. Refer to the example below:

Row() {
  Text() {
    Span('Span1，').fontSize(50).fontColor(Color.Grey)
      .decoration({ type: TextDecorationType.LineThrough, color: Color.Red })
  }

  Text() {
    Span('Span2').fontColor(Color.Blue).fontSize(30)
      .fontStyle(FontStyle.Italic)
      .decoration({ type: TextDecorationType.Underline, color: Color.Black })
  }

  Text() {
    Span('Span3').fontSize(20).fontColor(Color.Grey)
      .decoration({ type: TextDecorationType.Overline, color: Color.Green })
  }
}
.alignItems(VerticalAlign.Top)

3. Does HarmonyOS Text support modifying fontFamily?

Text supports modifying fontFamily. After registering custom fonts, directly set the fontFamily property for Text. Refer to the documentation: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-font-V5

4. Does HarmonyOS Image component have a method to change the color of icons in PNG images?

To modify the color of PNG images, use colorFilter: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-image-V5

5. Founder fonts missing on HarmonyOS phones?

Check if registering custom fonts meets the requirement: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-font-V5

registerFont(options: FontOptions): void

Registers a custom font in the font management system.

// xxx.ets
import { font } from '@kit.ArkUI';


@Entry
@Component
struct FontExample {
  @State message: string = 'Hello World';
  // IconFont example, assuming \u0000 is the specified icon's Unicode (actual Unicode should be obtained from the registered iconFont's TTF file)
  @State unicode: string = '\u0000';
  @State codePoint: string = String.fromCharCode(0x0000);


  aboutToAppear() {
    // Both familyName and familySrc support system Resources
    font.registerFont({
      // It is recommended to use this.getUIContext().getFont().registerFont() interface
      familyName: $r('app.string.font_name'),
      familySrc: $r('app.string.font_src')
    })


    // familySrc supports RawFile
    font.registerFont({
      familyName: 'mediumRawFile',
      familySrc: $rawfile('font/medium.ttf')
    })


    // Register iconFont
    font.registerFont({
      familyName: 'iconFont',
      familySrc: '/font/iconFont.ttf'
    })


    // Both familyName and familySrc support strings
    font.registerFont({
      familyName: 'medium',
      familySrc: '/font/medium.ttf' // The font folder is at the same level as the pages directory
    })
  }


  build() {
    Column() {
      Text(this.message)
        .align(Alignment.Center)
        .fontSize(20)
        .fontFamily('medium') // 'medium' is the name of the registered custom font ($r('app.string.mediumFamilyName'), 'mediumRawFile', etc., can also be used)


      // Two ways to use iconFont
      Text(this.unicode)
        .align(Alignment.Center)
        .fontSize(20)
        .fontFamily('iconFont')
      Text(this.codePoint)
        .align(Alignment.Center)
        .fontSize(20)
        .fontFamily('iconFont')
    }.width('100%')
  }
}