liu yang

Posted on Jun 19

Practical Development of Dynamic Styles and Themes in HarmonyOS Next

#harmonyosnext

HarmonyOS Next Dynamic Style System Architecture and Techniques

I. Dynamic Style System Architecture

HarmonyOS Next's style system is built on an atomic design principle, enabling efficient style management through hierarchical configuration. It supports dynamic switching and overriding of global styles, component-specific styles, and inline styles.

1. Style Priority Rules

Global Styles: Defined in the resources/base/element directory in files like color.json and style.json, these styles are reusable across components.

// resources/base/element/color.json
{
  "color_primary": "#2196F3",
  "text_dark": "#333333"
}

// resources/base/element/style.json
{
  "text_title": {
    "fontSize": 20,
    "fontWeight": "500",
    "fontColor": "{color.text_dark}"
  }
}

Component Local Styles: Defined internally within a @Component, these styles have higher priority than global styles.
Inline Styles: Set directly within component attributes, these have the highest priority.

II. Dynamic Theme Switching Implementation

1. Theme Resource Definition and Switching Process

Core Steps:
- Define Multiple Theme Resources: Create separate theme folders (e.g., blue_theme, dark_theme) containing color.json and style.json files.
- Encapsulate Theme Data: Use CustomTheme and CustomColors classes to manage theme data.
- State Management for Theme Switching: Store the current theme identifier using @State or global state management tools, and listen for theme switch events to trigger UI updates.

Example: Theme Switching Logic

// Theme Control Class
class ThemeControl {
  static currentTheme: string = 'light';

  static setTheme(theme: string) {
    this.currentTheme = theme;
    // Trigger global UI update
    AppStorage.setOrCreate('currentTheme', theme);
  }
}

// Page Component
@Entry
@Component
struct HomePage {
  @StorageLink('currentTheme') currentTheme: string = 'light';

  build() {
    Column() {
      Button('Switch Theme')
        .onClick(() => {
          ThemeControl.setTheme(this.currentTheme === 'light' ? 'dark' : 'light');
        })
    }
    .backgroundColor($r(`app.color.background_${this.currentTheme}`))
  }
}

III. Dynamic Style Binding Techniques

1. Data-Driven UI Updates

HarmonyOS Next uses reactive decorators to bind styles dynamically to data:

@State: Manages component-private state, triggering local UI updates.
@link: Enables bidirectional data synchronization between parent and child components.
@Observed + @ObjectLink: Listens for changes in complex object properties.

Example: Dynamic Text Color Switching

@Component
struct DynamicText {
  @State textColor: string = '#333333';

  build() {
    Text('Dynamic Style Text')
      .fontColor(this.textColor)
      .onClick(() => {
        this.textColor = this.textColor === '#333333' ? '#2196F3' : '#333333';
      })
  }
}

2. Conditional Style Rendering

Use logical expressions to dynamically switch style properties.

Column() {
  Text('Conditional Style Example')
    .fontColor(this.currentTheme === 'dark' ? Color.White : Color.Black)
    .backgroundColor($r(`app.color.background_${this.currentTheme}`))
}

Summary

HarmonyOS Next's dynamic style system leverages atomic design principles and hierarchical configuration to manage styles efficiently. By utilizing global styles, component-specific styles, and inline styles with clear priority rules, developers can create flexible and responsive UIs. Dynamic theme switching and data-driven style updates further enhance the adaptability of applications across different devices and user preferences.

DEV Community