@pond-ts/charts API Reference
    Preparing search index...

    Function useChartTheme

    • Live ChartTheme bound to CSS custom properties: resolves resolve against the DOM (via cssVarTheme) and re-resolves whenever the theme toggle flips — a MutationObserver watches target's data-theme / class, so <ChartContainer theme={useChartTheme(...)} /> follows dark/light with no mode prop threaded through and no hand-ordered attribute-then-read dance.

      When the resolved theme changes it returns a new reference, which is the repaint signal — ChartContainer redraws when handed a new theme. A watched mutation that doesn't change the resolved values (e.g. an app toggling an unrelated class on <html>) returns the same reference, so it doesn't repaint. Resolution runs on mount and on watched-attribute changes only — never per frame — so the getComputedStyle read stays cheap.

      const theme = useChartTheme(defaultTheme, (v) => ({
        line: { default: { color: v('--td-primary') } },
        axis: { label: v('--td-text-3'), grid: v('--td-hairline') },
      }));
      return <ChartContainer width={w} theme={theme}>…</ChartContainer>;

      base and resolve are read fresh on every resolve (held in refs), so inline literals are fine — they don't need memoizing and don't re-subscribe the observer. But because a resolve only fires on mount + a watched mutation, changing base/resolve alone won't re-resolve until the next toggle; if you need to swap them and re-resolve immediately, change target / attributes (which re-subscribes) or remount. SSR-safe: the first value resolves with no DOM (returns base + any literal fallbacks); the client re-resolves on mount.

      Parameters

      • base: ChartTheme
      • resolve: (
            readVar: VarReader,
        ) => {
            annotation?: {
                color?: string;
                depth?: readonly [number, number, number];
                fillOpacity?: number;
            };
            area?: {
                default?: {
                    color?: string;
                    fill?: string;
                    fillOpacity?: number;
                    width?: number;
                };
                readonly [key: string]: | {
                    color?: string;
                    fill?: string;
                    fillOpacity?: number;
                    width?: number;
                }
                | undefined;
            };
            axis?: {
                grid?: string;
                gridDash?: readonly number[];
                label?: string;
                sessionDivider?: string;
                title?: { color?: string; opacity?: number; size?: number };
            };
            background?: string;
            band?: {
                default?: { fill?: string; opacity?: number };
                readonly [key: string]: { fill?: string; opacity?: number } | undefined;
            };
            bar?: {
                default?: {
                    fill?: string;
                    gap?: number;
                    highlight?: string;
                    minWidth?: number;
                    opacity?: number;
                    outlineWidth?: number;
                };
                readonly [key: string]: | {
                    fill?: string;
                    gap?: number;
                    highlight?: string;
                    minWidth?: number;
                    opacity?: number;
                    outlineWidth?: number;
                }
                | undefined;
            };
            box?: {
                default?: {
                    fill?: string;
                    fillOpacity?: number;
                    median?: string;
                    medianWidth?: number;
                    stroke?: string;
                    strokeWidth?: number;
                    whisker?: string;
                    whiskerWidth?: number;
                };
                readonly [key: string]: | {
                    fill?: string;
                    fillOpacity?: number;
                    median?: string;
                    medianWidth?: number;
                    stroke?: string;
                    strokeWidth?: number;
                    whisker?: string;
                    whiskerWidth?: number;
                }
                | undefined;
            };
            candle?: {
                default?: {
                    bodyWidth?: number;
                    falling?: { body?: string; wick?: string };
                    neutral?: { body?: string; wick?: string };
                    rising?: { body?: string; wick?: string };
                    wickWidth?: number;
                };
                readonly [key: string]: | {
                    bodyWidth?: number;
                    falling?: { body?: string; wick?: string };
                    neutral?: { body?: string; wick?: string };
                    rising?: { body?: string; wick?: string };
                    wickWidth?: number;
                }
                | undefined;
            };
            chip?: { background?: string };
            cursor?: string;
            font?: { family?: string; size?: number };
            gap?: { connectorOpacity?: number };
            line?: {
                default?: { color?: string; dash?: readonly number[]; width?: number };
                readonly [key: string]:
                    | { color?: string; dash?: readonly number[]; width?: number }
                    | undefined;
            };
            scatter?: {
                default?: {
                    color?: string;
                    label?: string;
                    outline?: string;
                    outlineWidth?: number;
                    radius?: number;
                    selectedOutline?: string;
                    selectedWidth?: number;
                };
                readonly [key: string]: | {
                    color?: string;
                    label?: string;
                    outline?: string;
                    outlineWidth?: number;
                    radius?: number;
                    selectedOutline?: string;
                    selectedWidth?: number;
                }
                | undefined;
            };
        }
      • Optionalopts: UseChartThemeOptions

      Returns ChartTheme

    Settings

    Member Visibility