--- title: Theming description: How WireKit themes Chart.js — CSS-variable bridge, dark-mode reactivity, palette overrides. visibility: guest draft: false related: - /components/charts-chartjs - /theming --- # 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 `` and `` 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. :::preview{title="Manual brand-purple line"} ::: ## 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). ```css :root { --color-wk-accent: oklch(70% 0.18 260); } .dark { --color-wk-accent: oklch(78% 0.16 260); } ``` See [Theming](/theming) for the full token list and theme-preset documentation. ## Dark-mode reactivity Toggle `.dark` on `` (or ``) 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. :::preview{title="Dark-mode reactive bar chart"} ::: Toggle the docs site's dark/light switch above and watch the grid + label colors flip without re-rendering. ## See Also - [WireKit Theming](/theming) for the full token reference - [Variants & Intents](/variants-and-intents) for the cross-component color-prop convention - [ApexCharts Theming](../charts-apex/theming.md) for the same bridge applied to the SVG-based adapter ## Design Tokens See [Chart.js adapter — Design Tokens](/components/charts-chartjs#design-tokens) for the color, typography, and grid tokens shared across every Chart.js demo.