Skip to content

supportChartTheme

Live theme resolution for planner-produced Echarts specs.

An Echarts chart draws to a canvas, so none of AppKit’s CSS custom properties reach it the way they reach the styled DOM around it: a .dark root re-skins the chart’s frame while the axis labels, grid lines, and tooltip inside keep whatever colors were baked into the spec. The planner (@dbx-tools/appkit-mastra) runs on the server and cannot know the reader’s theme at all, so the spec deliberately carries only theme-INDEPENDENT identity (the brand series palette and font stack) and leaves every chrome color to be resolved here.

This module reads AppKit’s chart tokens off a live element and hands the result to normalizeChartOption, which paints them onto the axes, title, legend, and tooltip. Reading from the CHART’s own element rather than :root matters because a host may scope .dark to a subtree (an embedded chat panel inside an otherwise-light app); custom properties inherit, so the chart element always sees the theme that actually applies to it.