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 Dataset palette slot 1 — the first series
--color-wk-danger / --color-wk-success / --color-wk-warning / --color-wk-info Dataset palette slots 2-5, in that order
--color-wk-text Legend labels
--color-wk-text-muted Default text color, axis tick labels, radial point labels
--color-wk-border Grid lines, the axis line, radial angle lines, tooltip border
--font-wk-sans Chart font family, tooltip included

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

The tooltip surface is the one part that is not token-driven, and that is deliberate: the bubble is mirrored against the active theme — near-black in light mode, near-white in dark — so it reads as a popover in both instead of the same dark blob on every background. Its border still follows --color-wk-border and its text still follows --font-wk-sans, so there is no color token that moves the bubble itself.

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.

Was this page helpful?

Thank you for your feedback!

Voting requires cookies or local storage. What we store