Theming
Switch between dune and night-dune with DuneChartProvider.
Wrap charts in DuneChartProvider and set theme to dune (day) or night-dune (night).
<DuneChartProvider theme="dune">
<DuneAreaChart data={data}>{/* parts */}</DuneAreaChart>
</DuneChartProvider>Theme values become CSS variables on [data-dune-theme]. Series colors come from config[key].color or the palette. See Chart config.
Theme tokens
Public token names (without the -- prefix) include:
| Token | Role |
|---|---|
dune-bg, dune-ink | Chart surface and text |
dune-1 through dune-5 | Default series palette |
dune-accent | Emphasis |
dune-grid, dune-tick, dune-border | Chart chrome |
dune-tooltip-* | Tooltip surface |
On this docs site, previews follow the page theme: light uses dune, dark uses night-dune.
AreaSingle-stack melange + water.