Skip to main content
WireKit
Copy for LLM

Theming

WireKit's Chart.js adapter automatically themes every chart against the active CSS-variable palette — no developer-side configuration needed. This page documents how the bridge works and how to override it.

How automatic theming works

When the wirekitChartJs Alpine factory boots, it reads these CSS variables off the chart's canvas element:

Variable Used for
--color-wk-accent Default dataset 0 color, legend active state
--color-wk-success / --color-wk-warning / --color-wk-danger / --color-wk-info Dataset 1-4 fallback palette
--color-wk-text Tick labels, legend text
--color-wk-text-muted Axis-line color, tooltip body
--color-wk-border Grid lines
--color-wk-bg-elevated Tooltip background
--font-wk-sans Default chart font family

A MutationObserver on <html> and <body> watches for .dark class toggles and re-applies the entire theme without a page reload.

Manual override — Per-dataset color

Pass backgroundColor / borderColor directly on the dataset. WireKit's auto-theming detects the explicit color and skips that dataset on dark-mode toggles.

Manual brand-purple line 
<x-wirekit-chart
    type="line"
    :labels="['A', 'B', 'C', 'D', 'E']"
    :datasets="[[
        'label' => 'Brand metric',
        'data' => [12, 18, 24, 22, 28],
        'borderColor' => '#8b5cf6',
        'backgroundColor' => 'rgba(139, 92, 246, 0.12)',
    ]]"
    aria-label="Custom brand-purple line series"
/>

Override theme tokens project-wide

Override the WireKit accent color in your app's :root {} block — every chart picks up the new value the next time the dark-mode observer fires (or on initial render).

:root {
    --color-wk-accent: oklch(70% 0.18 260);
}

.dark {
    --color-wk-accent: oklch(78% 0.16 260);
}

See Theming for the full token list and theme-preset documentation.

Dark-mode reactivity

Toggle .dark on <html> (or <body>) and every chart re-themes within 50 ms — debounced so rapid system-preference changes don't trigger a thrash. The prefers-reduced-motion: reduce OS setting collapses the color transition to instant.

Dark-mode reactive bar chart 
<x-wirekit-chart
    type="bar"
    :labels="['Mon', 'Tue', 'Wed', 'Thu', 'Fri']"
    :datasets="[['label' => 'Tickets resolved', 'data' => [12, 19, 15, 22, 18]]]"
    aria-label="Tickets resolved per weekday — reactive to dark-mode toggle"
/>

Toggle the docs site's dark/light switch above and watch the grid + label colors flip without re-rendering.

See Also

Design Tokens

See Chart.js adapter — Design Tokens for the color, typography, and grid tokens shared across every Chart.js demo.