Dashboard themes#

A theme controls chart surfaces, ink, chrome, categorical and numeric palettes, status colors, typography, furniture, tables, and mark styles. It changes presentation, never query data.

Theme precedence#

The closest explicit choice wins:

1. A chart's theme="slug" attribute.

2. The dashboard's theme: frontmatter.

3. The organization default.

4. supernova when no organization default is set.

Built-in themes#

Open Themes to preview every built-in against the same sample dashboard and set the organization default.

Mode-specific themes keep their authored palette in the supported mode. If the application is toggled to the other mode, the dashboard uses Supernova light or dark until the user toggles back. Dual-mode themes keep their own palette in both modes.

Status colors#

Separately from the series palette, each theme carries four semantic colors — good, bad, warning, and neutral — for what a reading means. A Big Number's change reads good or bad through them, and the sign is always printed too, so the meaning never rests on color alone.

Status colors are never series colors. No component prop can put a series into them, because a series colored "good" would make the palette argue with the number.

A theme that does not set them derives all four from its own palette: good, bad, and warning take the hue of the nearest series slot to green, red, and amber, placed at a lightness that reads as text; neutral is the theme's secondary ink. So an organization's green is its own green, and a theme file written before status existed keeps working with no edit.

Both the authored and the derived set face the same two rules at save time.

Pinned series#

By default a chart assigns palette slots in the order series appear in its own result. Two charts that list the same entities in a different order therefore color them differently, and a filter that removes a series moves the ones that remain.

Pin the entities that matter and neither happens:

{
  "seriesSlots": { "Northern region": 1, "Southern region": 4 }
}

A pinned series takes that slot on every chart that names it — line, bar, donut segment, legend swatch, tooltip, and the compare ghost. Names are matched without regard to case or surrounding space. Anything unpinned keeps its chart's own order, skipping the slots the pins already claimed. One boundary: a pinned series that ranks ninth or lower on a chart folds into "Other" like any series, and "Other" has its own color — pin "Other" itself to control that.

Pinning is the only assignment that survives a filter dropping a series, and it is deliberately explicit. An automatic page-wide scheme cannot do both jobs at once: an assignment that ignores which series are present has to be computed from the name alone, and with eight slots two names on one chart will sometimes land on the same color; avoiding that requires knowing which names are present, which is what makes the order move when the set moves. Naming the entities you care about is the assignment that has both properties.

Create an organization theme#

Choose Edit theme, start from a built-in, and enter the brand colors and presentation choices. Status colors and pinned series are set there too. Saving writes a theme file to your data repo. Built-in slugs are reserved and cannot be overwritten.

Every save validates contrast, color-vision distinguishability, numeric ramps, required modes, status legibility and the good-versus-bad pair, pinned slot uniqueness, and the closed theme schema. Invalid themes are refused with the failing rule instead of degrading at render time.

Override one chart#

<Chart data={revenue-daily} type="bar" x="day" y="revenue" theme="mercury" />

Use a per-chart override when the data needs a presentation different from the rest of the page. Palette slots follow the theme's pinned assignments where it has them, and otherwise the chart's own series order.