Skip to main content
WireKit
Copy for LLM

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
--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 via chart.updateOptions() with smooth ~250 ms interpolation.

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.

Manual brand-purple line 
<x-wirekit-chart
    library="apexcharts"
    type="line"
    :labels="['A', 'B', 'C', 'D', 'E']"
    :datasets="[[
        'label' => 'Brand metric',
        'data' => [12, 18, 24, 22, 28],
        'color' => '#8b5cf6',
    ]]"
    aria-label="Custom brand-purple line series"
/>

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' => ['#8b5cf6', '#ec4899', '#f97316', '#06b6d4']]"
/>

options.colors overrides the WireKit palette entirely; useful for brand-specific dashboards where the stock palette doesn't match.

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

Design Tokens

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