@finchart

Appearance

Documentation / @finchart/dom / ThemeObserverOptions

Interface: ThemeObserverOptions ​

Defined in: dom/src/observe-theme.ts:42

Calls back when the CSS behind --chart-* may have changed, so the consumer can ask for a repaint.

The canvas does not notice a theme swap. New variable values arrive the moment the cascade changes, but nothing redraws with them — the DOM parts (axis labels, tooltip, legend) follow at once while candles, grid and crosshair stay in the old colors. Theming guide calls that "changing only halfway", and until now the fix was a subscription every consumer wrote by hand. This is that subscription, once.

ts
const stop = observeTheme(container, () => plot.requestRender());

Not wired by browserDeps, on purpose. A chart in a page with one fixed palette should not carry a MutationObserver, and a default that causes a static import is a charge levied on every consumer. This is a door: import it when a theme can actually change.

It also takes onChange directly rather than returning an observer the way observeElementSize and observeDevicePixelRatio do. Those two are shaped for a PlotDeps slot because the stage has to act on what they report; a theme change asks for nothing but a render, so it needs no contract in the core and the consumer holds the subscription.

Two things move a variable's value:

  • prefers-color-scheme — the OS switching, with no code of ours on the path at all.
  • an attribute on the element or an ancestor — class="dark", data-theme, an inline style. The chain is walked once at subscribe time; a theme toggled by restructuring the DOM above the chart (rather than by re-dressing it) is out of reach, and so is a swapped stylesheet.

No debounce. A class toggle can produce several mutations, and requestRender() already collapses a frame's worth of requests into one — debouncing here would only delay the frame.

Properties ​

attributes? ​

optional attributes?: readonly string[]

Defined in: dom/src/observe-theme.ts:48

Attributes whose change counts as a theme change. The default covers the three conventions in the wild; a design system that marks its theme some other way names it here.