Theming

Colours come from CSS variables

Series colours reference CSS custom properties rather than literal hex values:

const config = {
  revenue: { label: "Revenue", color: "var(--chart-1)" },
  forecast: { label: "Forecast", color: "var(--chart-2)" },
};

Define those variables once in your stylesheet and every chart in the app follows. Redefining them under a dark selector is the whole of dark mode support: the components do not branch on theme.

Using your brand palette

Point the chart variables at tokens you already own rather than inventing a second palette:

:root {
  --chart-1: var(--brand-primary);
  --chart-2: var(--brand-secondary);
}

Choosing categorical colours

Sequential data wants one hue varying in lightness; categorical data wants distinct hues. The common mistake is using a categorical palette for an ordered series, which implies differences in kind where there are only differences in degree.