OpenHarmony图表如何做深色模式

在 OpenHarmony（ArkUI / eTS）里做图表的“深色模式”，本质上有 三种思路，从简单到完整依次是：

一、使用系统/全局深色模式（最简单）

如果你的图表库或组件支持跟随系统主题，只需要：

1. 监听系统深浅色

import { Configuration } from '@ohos.app.ability.Configuration';

let colorMode = AppStorage.Get('colorMode');

或使用：

this.context.getApplicationContext().getConfiguration().colorMode

2. 给图表传不同配色

let isDark = colorMode === 1; // 1 表示深色

chart.setOption({
  backgroundColor: isDark ? '#1A1A1A' : '#FFFFFF',
  textStyle: {
    color: isDark ? '#FFFFFF' : '#000000'
  }
});

✅ 适合：ECharts、自绘 Canvas 图表

二、使用 OpenHarmony 的“资源限定符”（推荐）

OpenHarmony 原生支持 color mode 资源目录：

resources/
 ├─ base/
 │   └─ element/
 │       └─ color.json
 ├─ dark/
 │   └─ element/
 │       └─ color.json

color.json（base）

{
  "chart_bg": "#FFFFFF",
  "chart_text": "#000000"
}

color.json（dark）

{
  "chart_bg": "#1A1A1A",
  "chart_text": "#FFFFFF"
}

使用方式

.chart {
  background-color: $r('app.color.chart_bg');
  color: $r('app.color.chart_text');
}

✅ 系统切换深色模式，图表自动变化
✅ 官方推荐方案

三、自定义图表（Canvas / SVG）深色处理

如果是 自己画的图表：

1. 定义主题对象

const themes = {
  light: {
    axis: '#999',
    line: '#007DFF',
    bg: '#FFFFFF'
  },
  dark: {
    axis: '#666',
    line: '#409EFF',
    bg: '#121212'
  }
}

2. 根据模式绘制

let theme = isDark ? themes.dark : themes.light;
canvas.fillStyle = theme.bg;

四、常见图表库情况（OpenHarmony）

五、最佳实践建议 ✅

1. 不要写死颜色
2. 使用 resources/dark
3. 图表配色单独抽成 theme
4. 监听系统变化实时刷新

如果你能告诉我：

• 用的是 哪种图表（ECharts / Canvas / 第三方库）
• OpenHarmony API 版本

我可以直接给你一份可运行示例代码。