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

    Function cssVarTheme

    • Build a ChartTheme by overlaying CSS-custom-property values onto a base theme — the adapter that lets a chart track a design system's tokens (and its dark/light toggle) without hand-mirroring hex values.

      resolve receives a VarReader and returns only the slots to override (a ChartThemeOverrides); the result is base deep-merged with them. The typed ChartTheme stays the one styling channel — this generates it from CSS, it doesn't add a second one.

      const theme = cssVarTheme(defaultTheme, (v) => ({
        line: { default: { color: v('--td-primary') }, secondary: { color: v('--td-secondary') } },
        axis: { label: v('--td-text-3'), grid: v('--td-hairline') },
        cursor: v('--td-text-3'),
        font: { family: v('--td-font-mono') },
      }));

      DOM-only, by design. It reads getComputedStyle off opts.element (or document.documentElement). With no DOM — SSR, an OffscreenCanvas worker — every readVar returns its fallback (or undefined, kept from base), so the call is safe and returns the base theme (plus any literal fallbacks). For a live chart that follows a theme toggle, use useChartTheme, which wraps this and re-resolves on a data-theme change — don't call cssVarTheme per frame (getComputedStyle is a layout read).

      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: { element?: Element }

      Returns ChartTheme

    Settings

    Member Visibility