Theming

shadcn-echarts reads your CSS variables and registers matching ECharts themes.

Default behavior

• Theme auto-detects from `.dark` class and system preference.
• No `theme` prop required for most use cases.
• Minimal preset is defaults-only and does not override explicit styles.

Force theme mode

import { BarChart } from "@devstool/shadcn-echarts"

<BarChart
  theme="dark"
  option={{
    xAxis: { type: "category", data: ["Mon", "Tue", "Wed"] },
    yAxis: { type: "value" },
    series: [{ type: "bar", data: [20, 40, 15] }]
  }}
/>

Important CSS tokens

• Chart palette: --chart-1 ... --chart-5
• Surfaces and text: --background, --foreground
• Structural tokens: --border, --muted, --muted-foreground