Theming

Charts follow the mates light/dark theme automatically — globally, per chart, or with a fully custom palette.

Automatic light/dark

Call useThemeAtomWithHighcharts() once at your app root. It maps themeAtom (including "auto") onto Highcharts defaults — background, text, gridlines, tooltip and a dark-optimised colour palette — and re-applies them on every change.

App root

import { useThemeAtomWithHighcharts } from "mates-charts";

export const App = () => {
    useThemeAtomWithHighcharts(); // once, in the root component
    return () => html`…`;
};

Current resolved theme: dark

Per-chart override

Pin a chart to one theme, or pass a reactive getter — the chart re-creates itself when the getter's value changes.

Chart options

// always dark (e.g. inside a dark sidebar)
Chart(chartAtom(config), { theme: "dark" });

// follow any atom you like
const compactAtom = atom<"light" | "dark">("light");
Chart(chartAtom(config), { theme: () => compactAtom() });

Custom palette

Brand colours go through standard Highcharts options — set colors on the config, or globally via Highcharts.setOptions.

Global brand palette

import { Highcharts } from "mates-charts";

Highcharts.setOptions({
    colors: ["#00968c", "#06b6d4", "#d97706", "#7c3aed", "#dc2626"],
});

What the wrapper does on theme change

The chart root div always carries a highcharts-light or highcharts-dark class for CSS targeting. When the theme changes, the instance is destroyed and re-created with the new defaults — atom updates keep flowing afterwards.