Theming
WireKit's ApexCharts 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 wirekitApexChart Alpine factory boots, it reads these CSS variables off the chart's mount element:
| Variable | Used for |
|---|---|
--color-wk-accent |
Default series 0 color |
--color-wk-success / --color-wk-warning / --color-wk-danger / --color-wk-info |
Series 1-4 fallback palette |
--color-wk-text |
Legend text, dataLabels |
--color-wk-text-muted |
Axis labels, tooltip |
--color-wk-border |
Grid lines, axis borders |
--font-wk-sans |
Default chart font family |
A MutationObserver on <html> and <body> watches for .dark class toggles and re-applies the entire theme via chart.updateOptions() with smooth ~250 ms interpolation.
The tooltip is not in that table on purpose. Its surface comes from ApexCharts' own stylesheet, selected by tooltip.theme — the factory sets it to dark or light from the same .dark observation and does not paint the panel itself. --color-wk-bg-elevated was listed here as the tooltip background and no chart code has ever read it; the tokens the theming layer really resolves are exactly the ones above.
Manual override — Per-series color
Pass color directly on each series. WireKit's auto-theming detects explicit colors and skips those series on dark-mode toggles.
Override theme tokens project-wide
Override the WireKit accent in your app's :root {} block — every chart picks up the new value the next time the dark-mode observer fires.
:root {
--color-wk-accent: oklch(70% 0.18 260);
}
.dark {
--color-wk-accent: oklch(78% 0.16 260);
}
See WireKit Theming for the full token list.
Palette override
<x-wirekit-chart
type="bar"
:labels="['A', 'B', 'C', 'D']"
:datasets="[['label' => 'Custom palette', 'data' => [10, 20, 15, 25]]]"
:options="['colors' => ['#1d4ed8', '#0f766e', '#b45309', '#475569']]"
/>
options.colors overrides the WireKit palette entirely; useful for brand-specific dashboards where the stock palette doesn't match.
The four above are a plain corporate set — blue, teal, amber, slate — chosen because this block is meant to be pasted. An example is a default in practice: whatever it shows is what turns up in the dashboards of readers who only wanted to know the option exists.
License note
ApexCharts is non-MIT — see the License section on the Chart overview page and apexcharts.com/license for the full terms.
See Also
- Chart.js Theming for the equivalent on the canvas-based adapter
- WireKit Theming for the full token reference
- Variants & Intents for cross-component color-prop conventions
Design Tokens
See ApexCharts adapter — Design Tokens for the color, typography, and grid tokens shared across every ApexCharts demo.