HarmonyOS 鸿蒙Next主题管理深色模式如何实现切换？暗黑模式适配指南

1. 颜色资源配置

在 resources/base/element/color.json 中定义浅色主题颜色：

{
  "color": [
    { "name": "primary", "value": "#36e27b" },
    { "name": "background", "value": "#f6f8f7" },
    { "name": "surface", "value": "#ffffff" },
    { "name": "text_primary", "value": "#111714" },
    { "name": "text_secondary", "value": "#6b7280" },
    { "name": "divider", "value": "#e5e7eb" }
  ]
}

在 resources/dark/element/color.json 中定义深色主题颜色：

{
  "color": [
    { "name": "primary", "value": "#36e27b" },
    { "name": "background", "value": "#112117" },
    { "name": "surface", "value": "#1C2E24" },
    { "name": "text_primary", "value": "#ffffff" },
    { "name": "text_secondary", "value": "#9eb7a8" },
    { "name": "divider", "value": "#1a3d2a" }
  ]
}

2. 主题管理服务

3. 在EntryAbility中监听系统主题

// EntryAbility.ets
import { AbilityConstant, ConfigurationConstant, UIAbility, Want } from '@kit.AbilityKit'
import { ThemeManager } from '../utils/ThemeManager'

export default class EntryAbility extends UIAbility {

  async onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): Promise<void> {
    // 初始化主题管理器
    await ThemeManager.getInstance().init(this.context)
  
    // 获取当前系统主题
    const colorMode = this.context.config.colorMode
    ThemeManager.getInstance().updateSystemColorMode(colorMode)
  }

  // 监听系统配置变化
  onConfigurationUpdate(newConfig: Configuration): void {
    if (newConfig.colorMode !== undefined) {
      ThemeManager.getInstance().updateSystemColorMode(newConfig.colorMode)
    }
  }
}

4. 主题设置页面

import { ThemeManager, ThemeMode } from '../utils/ThemeManager'

@Entry
@Component
struct ThemeSettingsPage {
  @State currentMode: ThemeMode = ThemeMode.SYSTEM
  @State isDark: boolean = false

  private themeManager = ThemeManager.getInstance()

  aboutToAppear(): void {
    this.currentMode = this.themeManager.getThemeMode()
    this.isDark = this.themeManager.isDarkMode()
  
    // 监听主题变化
    this.themeManager.addListener((isDark) => {
      this.isDark = isDark
    })
  }

  build() {
    Column({ space: 16 }) {
      Text('主题设置')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .fontColor($r('app.color.text_primary'))
        .width('100%')
      
      // 主题选项
      Column({ space: 8 }) {
        this.ThemeOption('跟随系统', ThemeMode.SYSTEM)
        this.ThemeOption('浅色模式', ThemeMode.LIGHT)
        this.ThemeOption('深色模式', ThemeMode.DARK)
      }
      .padding(16)
      .backgroundColor($r('app.color.surface'))
      .borderRadius(16)
      
      // 当前状态预览
      Column({ space: 8 }) {
        Text('当前状态')
          .fontSize(14)
          .fontColor($r('app.color.text_secondary'))
        Text(this.isDark ? '深色模式' : '浅色模式')
          .fontSize(16)
          .fontColor($r('app.color.text_primary'))
      }
      .padding(16)
      .backgroundColor($r('app.color.surface'))
      .borderRadius(16)
      .width('100%')
    }
    .width('100%')
    .height('100%')
    .padding(16)
    .backgroundColor($r('app.color.background'))
  }

  @Builder
  ThemeOption(title: string, mode: ThemeMode) {
    Row() {
      Text(title)
        .fontSize(16)
        .fontColor($r('app.color.text_primary'))
      
      Blank()
      
      Radio({ value: mode, group: 'theme' })
        .checked(this.currentMode === mode)
        .onChange((isChecked: boolean) => {
          if (isChecked) {
            this.currentMode = mode
            this.themeManager.setThemeMode(mode)
          }
        })
    }
    .width('100%')
    .height(48)
    .padding({ left: 12, right: 12 })
  }
}

import { preferences } from '@kit.ArkData'
import { ConfigurationConstant } from '@kit.AbilityKit'

// 主题模式枚举
export enum ThemeMode {
  SYSTEM = 'system', // 跟随系统
  LIGHT = 'light',   // 浅色
  DARK = 'dark'      // 深色
}

// 主题管理类
export class ThemeManager {
  private static instance: ThemeManager
  private context: Context | null = null
  private currentMode: ThemeMode = ThemeMode.SYSTEM
  private systemIsDark: boolean = false
  private listeners: ((isDark: boolean) => void)[] = []

  static getInstance(): ThemeManager {
    if (!ThemeManager.instance) {
      ThemeManager.instance = new ThemeManager()
    }
    return ThemeManager.instance
  }

  // 初始化
  async init(context: Context): Promise<void> {
    this.context = context
    await this.loadSavedMode()
  }

  // 加载保存的主题模式
  private async loadSavedMode(): Promise<void> {
    if (!this.context) return
  
    try {
      const prefs = await preferences.getPreferences(this.context, { name: 'settings' })
      const mode = await prefs.get('themeMode', ThemeMode.SYSTEM) as ThemeMode
      this.currentMode = mode
    } catch (err) {
      console.error('加载主题设置失败:', err)
    }
  }

  // 设置主题模式
  async setThemeMode(mode: ThemeMode): Promise<void> {
    this.currentMode = mode
  
    if (this.context) {
      const prefs = await preferences.getPreferences(this.context, { name: 'settings' })
      await prefs.put('themeMode', mode)
      await prefs.flush()
    }
  
    this.notifyListeners()
  }

  // 更新系统主题状态
  updateSystemColorMode(colorMode: ConfigurationConstant.ColorMode): void {
    this.systemIsDark = colorMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK
  
    if (this.currentMode === ThemeMode.SYSTEM) {
      this.notifyListeners()
    }
  }

  // 获取当前是否为深色模式
  isDarkMode(): boolean {
    switch (this.currentMode) {
      case ThemeMode.LIGHT:
        return false
      case ThemeMode.DARK:
        return true
      case ThemeMode.SYSTEM:
      default:
        return this.systemIsDark
    }
  }

  // 获取当前主题模式
  getThemeMode(): ThemeMode {
    return this.currentMode
  }

  // 添加监听器
  addListener(listener: (isDark: boolean) => void): void {
    this.listeners.push(listener)
  }

  // 移除监听器
  removeListener(listener: (isDark: boolean) => void): void {
    const index = this.listeners.indexOf(listener)
    if (index > -1) {
      this.listeners.splice(index, 1)
    }
  }

  // 通知所有监听器
  private notifyListeners(): void {
    const isDark = this.isDarkMode()
    this.listeners.forEach(listener => listener(isDark))
  }
}

5. 在组件中使用主题颜色

@Component
struct ThemedCard {
  build() {
    Column({ space: 12 }) {
      Text('标题')
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .fontColor($r('app.color.text_primary')) // 自动适配主题
    
      Text('描述内容')
        .fontSize(14)
        .fontColor($r('app.color.text_secondary')) // 自动适配主题
    
      Divider()
        .color($r('app.color.divider')) // 自动适配主题
    }
    .padding(16)
    .backgroundColor($r('app.color.surface')) // 自动适配主题
    .borderRadius(16)
  }
}