一、基础适配方案

1. 双资源目录适配（推荐）

在resources目录下创建base（浅色）和dark（深色）子目录，系统根据当前模式自动加载对应资源。
操作步骤：

1. 创建resources/base/element/color.json定义浅色资源：

{
  "color": [
    {"name": "background_color", "value": "#ffffff"},
    {"name": "text_color", "value": "#000000"}
  ]
}

1. 创建resources/dark/element/color.json定义深色资源：

{
  "color": [
    {"name": "background_color", "value": "#1a1a1a"},
    {"name": "text_color", "value": "#e6e6e6"}
  ]
}

1. 组件直接引用资源：

Text('自适应文本')
  .fontColor($r('app.color.text_color'))
  .backgroundColor($r('app.color.background_color'))

2. 系统分层参数（快速适配）

直接引用系统预置的动态颜色资源，自动响应模式切换：

Text('系统级动态颜色')
  .fontColor($r('sys.color.ohos_id_color_text_primary'))
  .backgroundColor($r('sys.color.ohos_id_color_background'))

常用系统资源包括：

• ohos_id_color_text_primary（主文本色）
• ohos_id_color_background（背景色）
• ohos_id_color_foreground（前景色）

二、动态模式切换

1. 监听系统模式变化
通过AbilityStage监听配置变更：

// 在AbilityStage中注册监听
onConfigurationUpdate(config: Configuration) {
  if (config.colorMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK) {
    // 深色模式逻辑
  } else {
    // 浅色模式逻辑
  }
}

2. 主动设置应用模式
允许用户自主选择是否跟随系统：

import common from '@kit.AbilityKit';

// 设置独立模式（不跟随系统）
let context: common.UIAbilityContext = ...; // 获取上下文
context.setColorMode(common.ColorMode.COLOR_MODE_DARK);

// 保存用户偏好至持久化存储（如首选项）
import preferences from '@kit.ArkData';
preferences.setPreferences(context, { 'user_theme': 'dark' });

三、进阶技巧

1. SVG图标动态着色
通过fillColor属性实现图标颜色适配：

Image($r('app.media.icon_svg'))
  .fillColor($r('sys.color.ohos_id_color_foreground'))

2. Web组件适配
配置Web组件的深色模式：

Web({ src: 'www.example.com' })
  .darkMode(true) // 启用深色模式

四、最佳实践建议

1. 优先使用系统资源：减少自定义资源维护成本。
2. 双目录命名规范：确保base与dark目录中资源同名。
3. 动态监听与持久化结合：既响应系统变化，又保留用户偏好。
4. OLED设备优化：深色模式使用纯黑背景（#000000）可显著省电。

通过上述方案，开发者可快速实现应用主题的深浅色适配，提升用户体验一致性。实际开发中建议通过Previewer实时预览不同模式下的UI效果，确保视觉层次清晰。