Styling, export and integration

Themes, light and dark

115 of 136

Two palettes, one call

A plot draws from a dark palette or a light one, and one call chooses:

export function show(plot: Plot, theme: ThemeName): void {
  // Charts, the scene and the colour the canvas clears to, in one call.
  plot.setTheme(theme);
}

It reaches everything the plot draws. The charts change their text, gridlines and series colours, and the scene changes the colour the canvas clears to. Press the keys above: the chart and the cloud behind it move together, because there is one setting and not one for each.

plot.theme reads back which palette is in use.

Following the reader

A plot that stays dark inside a light page looks broken. A page that has no theme switch of its own can hand the decision to the reader's system setting:

export function follow(plot: Plot): () => void {
  // Reads the reader's system setting now and whenever it changes. What comes
  // back stops it, for a page that later takes the theme over itself.
  return plot.followPageTheme();
}

It applies the setting at once and again whenever it changes. The function it returns stops it, and destroying the plot stops it too.

A page with its own switch calls setTheme from wherever that switch lives. The plots on this site do: they follow the toggle in the top bar.

What a series is drawn in

A series that names no colour takes the palette's cycle, in the order the document lists it, so the same chart is legible on both palettes without a colour being chosen for either. A series that was given a colour keeps it. Styling and palette API has the detail.