第33篇：深色模式适配——从 1.0.7 版本看最佳实践

一、引言

深色模式是鸿蒙系统的重要特性，提供更好的夜间使用体验并节省电量。DriverLicenseExam 1.0.7 版本新增了深色模式适配，支持跟随系统、强制浅色、强制深色三种模式。本文将深入解析其实现。

二、深色模式架构

2.1 三种模式

// 模式定义
0 = 跟随系统（COLOR_MODE_NOT_SET）
1 = 强制浅色（COLOR_MODE_LIGHT）
2 = 强制深色（COLOR_MODE_DARK）

2.2 模式切换实现

// EntryAbility.ets
private setLightOrDarkMode(context: Context) {
  const preferencesUtil = PreferencesUtil.getInstance();
  const preference = preferencesUtil.getPreferences(context);
  const value = preferencesUtil.getPreferencesValue(preference, 'lightDarkMode') || 0;
  AppStorage.setOrCreate('lightDarkMode', value);

  if (value === 0) {
    context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
  } else if (value === 1) {
    context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT);
  } else if (value === 2) {
    context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_DARK);
  }
}

三、系统资源色使用

3.1 颜色资源引用

项目使用 sys.color 系统资源色实现深色模式自动适配：

// 使用系统颜色，自动适配深色模式
.fontColor($r('sys.color.font_primary'))           // 主要文字
.fontColor($r('sys.color.font_secondary'))         // 次要文字
.backgroundColor($r('sys.color.background_primary'))   // 一级背景
.backgroundColor($r('sys.color.background_secondary')) // 二级背景
.backgroundColor($r('sys.color.comp_background_primary'))  // 组件背景

3.2 自定义颜色

// 自定义颜色需要针对深色模式提供不同值
// color.json 中定义
{ "name": "icon_color_highlight", "value": "#FF64BB5C" }
{ "name": "search_background", "value": "#FFF1F3F5" }

四、状态持久化

4.1 保存到 Preferences

// 设置深色模式
SettingSelectDialog({
  options: LIGHT_DARK_OPTIONS,
  onSelect: (value: number) => {
    AppStorage.setOrCreate('lightDarkMode', value);
    const preferencesUtil = PreferencesUtil.getInstance();
    const preference = preferencesUtil.getPreferences(context);
    preferencesUtil.preferencesPut(preference, 'lightDarkMode', value);
    // 应用设置
    context.getApplicationContext().setColorMode(
      value === 0 ? ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET :
      value === 1 ? ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT :
      ConfigurationConstant.ColorMode.COLOR_MODE_DARK
    );
  },
});

4.2 恢复状态

// 在 Ability 启动时恢复
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
  this.setLightOrDarkMode(this.context);
}

onNewWant(want: Want, launchParam: AbilityConstant.LaunchParam): void {
  this.setLightOrDarkMode(this.context);
}

五、总结

深色模式适配的关键点是使用系统资源色（sys.color）替代硬编码颜色值，并通过 Preferences 持久化用户的选择状态。

关键源码文件：

• products/entry/src/main/ets/entryability/EntryAbility.ets
• components/app_setting/src/main/ets/constants/LightDarkOptions.ets
• commons/commonLib/src/main/ets/utils/PreferencesUtil.ets