Theming

theme + color

<LiveChart
  data={data}
  value={value}
  theme="dark" // or "light"
  color="#8b5cf6"
/>

Prop	Default	Notes
`theme`	`"dark"`	Switches grid, badge chrome, tooltips, background fade targets
`color`	`"#3b82f6"`	Accent — line, fill, badge fill, flat-state glow

Pass any CSS color LiveCharts can parse (#rgb, #rrggbb, rgb(), rgba()). The library derives the full LiveChartPalette via resolveTheme.

Dark theme. Same component, different colour.

What gets derived

From one accent + mode:

Line stroke and fill gradient
Grid lines / labels
Badge background (accent) + outer chrome (mode)
Crosshair / tooltip surfaces
Dash connector and reference-line neutrals

What stays semantic

Momentum green / red for up / down dots and arrows are fixed (#22c55e / #ef4444). They do not follow the accent, so direction stays readable on any brand color.

Multi-series colors

Each series carries its own color. If you omit colors, SERIES_COLORS provides a default rotation.

Matching your page

In docs/home you usually sync theme with the site theme:

const { resolvedTheme } = useTheme();
const chartTheme = resolvedTheme === "dark" ? "dark" : "light";

<LiveChart theme={chartTheme} color="#2563eb" /* ... */ />

Put the chart in a container whose background matches theme so edge fades look correct.