--- title: Theming description: How WireKit themes ApexCharts — CSS-variable bridge, dark-mode reactivity, palette overrides. visibility: guest draft: false related: - /components/charts-apex - /components/charts-chartjs/theming - /theming --- # 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 `` and `` 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. :::preview{title="Manual brand-purple line"} ::: ## 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. ```css :root { --color-wk-accent: oklch(70% 0.18 260); } .dark { --color-wk-accent: oklch(78% 0.16 260); } ``` See [WireKit Theming](/theming) for the full token list. ## Palette override ```blade ``` `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](/components/chart#license-apexcharts-only) and [apexcharts.com/license](https://apexcharts.com/license/) for the full terms. ## See Also - [Chart.js Theming](../charts-chartjs/theming.md) for the equivalent on the canvas-based adapter - [WireKit Theming](/theming) for the full token reference - [Variants & Intents](/variants-and-intents) for cross-component color-prop conventions ## Design Tokens See [ApexCharts adapter — Design Tokens](/components/charts-apex#design-tokens) for the color, typography, and grid tokens shared across every ApexCharts demo.