HarmonyOS 鸿蒙Next中怎么设置深色模式

• 应用跟随系统深浅色模式切换：使用setColorMode()方法将ColorMode设置为COLOR_MODE_NOT_SET（未设置颜色模式），然后应用在运行过程中就可以自动感知到系统颜色模式切换，若应用完成了深浅色模式适配，将自动切换到对应的颜色模式。
• 应用内提供手动控制深浅色的开关供用户自行选择：切换深色模式需要调用setColorMode()方法将ColorMode设置为COLOR_MODE_DARK（深色模式），切换浅色模式需要将ColorMode设置为COLOR_MODE_LIGHT（浅色模式），这样就可以完成对应用深浅色的手动控制。

const setColorMode = (context: common.UIAbilityContext, colorMode: ConfigurationConstant.ColorMode) => {
    try {
        context.getApplicationContext().setColorMode(colorMode);
    } catch (err) {
        let error = err as BusinessError;
        hilog.error(0x0000, 'ColorModeChangeFunctions',
        `setColorMode failed. error code=${error.code}, message=${error.message}`);
    }
}

const setAutoColorMode = (context: common.UIAbilityContext) => {
    setColorMode(context, ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
}

const setDarkColorMode = (context: common.UIAbilityContext) => {
    setColorMode(context, ConfigurationConstant.ColorMode.COLOR_MODE_DARK);
}

const setLightColorMode = (context: common.UIAbilityContext) => {
    setColorMode(context, ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT);
}

第一步：建好深浅色资源

entry/src/main/resources/

base/element/color.json # 浅色

dark/element/color.json # 深色（这都自己建）

大概这样配就行

{
  "color": [
    { "name": "bg_page", "value": "#ffffff" },
    { "name": "text_main", "value": "#000000" }
  ]
}

第二步：要做全局状态管理

import { ConfigurationConstant } from '@kit.AbilityKit';
import { preferences } from '@kit.DataStorageKit';

// 三态枚举
export enum ThemeMode {
  SYSTEM = 0,   // 跟随系统
  DARK = 1,     // 深色
  LIGHT = 2     // 浅色
}

export class ThemeManager {
  static prefs: preferences.Preferences | null = null;
  static currentMode: ThemeMode = ThemeMode.SYSTEM;

  // 初始化（APP启动时调用一次）
  static async init() {
    ThemeManager.prefs = await preferences.getPreferences(getContext(), 'theme_prefs');
    const val = ThemeManager.prefs.getInt('theme_mode', ThemeMode.SYSTEM);
    ThemeManager.currentMode = val as ThemeMode;
    ThemeManager.apply();
  }

  // 切换模式
  static setMode(mode: ThemeMode) {
    ThemeManager.currentMode = mode;
    ThemeManager.prefs?.putInt('theme_mode', mode);
    ThemeManager.prefs?.flush();
    ThemeManager.apply();
  }

  // 把当前模式设置到全局Context
  static apply() {
    const ctx = getContext();
    switch (ThemeManager.currentMode) {
      case ThemeMode.SYSTEM:
        ctx.setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
        break;
      case ThemeMode.DARK:
        ctx.setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_DARK);
        break;
      case ThemeMode.LIGHT:
        ctx.setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT);
        break;
    }
  }
}

第三步：设置

然后就是根据用户选择或者初始化的时候进行设置了

import { ThemeManager, ThemeMode } from '../common/ThemeManager';

@Entry
@Component
struct ThemeSettingPage {
  @State selected: ThemeMode = ThemeManager.currentMode;

  build() {
    Column() {
      Text('深色模式')
        .fontSize(20)
        .margin({ bottom: 20 })

      // 跟随系统
      Radio({ value: ThemeMode.SYSTEM, group: 'theme' })
        .checked(this.selected === ThemeMode.SYSTEM)
        .onChange(() => {
          this.selected = ThemeMode.SYSTEM;
          ThemeManager.setMode(ThemeMode.SYSTEM);
        })
      Text('跟随系统')

      // 开启深色
      Radio({ value: ThemeMode.DARK, group: 'theme' })
        .checked(this.selected === ThemeMode.DARK)
        .onChange(() => {
          this.selected = ThemeMode.DARK;
          ThemeManager.setMode(ThemeMode.DARK);
        })
      Text('开启深色')

      // 关闭深色（浅色）
      Radio({ value: ThemeMode.LIGHT, group: 'theme' })
        .checked(this.selected === ThemeMode.LIGHT)
        .onChange(() => {
          this.selected = ThemeMode.LIGHT;
          ThemeManager.setMode(ThemeMode.LIGHT);
        })
      Text('关闭深色')
    }
    .width('100%')
    .height('100%')
    .padding(20)
    .backgroundColor($r('app.color.bg_page'))
    .fontColor($r('app.color.text_main'))
  }
}

最后就是如果要记住上一次用户的选择，还可以做Preferences持久化配置，基本步骤就是这样了，希望可以帮到你