Themes

ApexCharts theming controls the colors and light or dark appearance of every chart, from a single option to a full design-system integration. You can pick a built-in palette, shade a single color, switch to dark mode, or, in ApexCharts 6.0, drive colors from your CSS design tokens, follow the operating system's light and dark setting automatically, register named brand themes, and swap in color-blind-safe palettes. All of it is set through the theme option (and the global Apex object), and the newer 6.0 features are fully backward compatible with the classic options.

Key takeaways

• Quick color change: set theme.palette to one of ten built-in palettes, or pass your own colors array (see the Colors guide).
• Dark mode: theme.mode: 'dark' inverts text, gridlines, and labels. It does not change the chart background, so style the container too.
• New in 6.0 (Facet): read colors from --apx-* CSS tokens, theme.follow: 'os' for automatic OS dark mode, registerTheme() for named brands, and accessibility.colorBlindMode for deficiency-safe palettes.
• Precedence: explicit chart config beats CSS tokens, which beat a registered theme, which beats the built-in default.
• Apply once, everywhere: set any of these on window.Apex to theme every chart on the page.

Which theming approach should you use?

Every approach below is set on the theme option (or colors). Classic options work in all versions; Facet options require ApexCharts 6.0.

Approach	Option	Use it when	Version
Built-in palette	theme.palette	You want a quick, tested color set	All
Custom colors	colors	You have exact brand colors (Colors guide)	All
Monochrome	theme.monochrome	Data is one hue with ordered shades	All
Dark mode	theme.mode	The chart sits on a dark surface	All
Global defaults	window.Apex	You want one theme across many charts	All
CSS design tokens	theme.tokens	You already theme via a CSS design system	6.0
Follow the OS	theme.follow: 'os'	You want zero-JS automatic dark mode	6.0
Named brand themes	registerTheme() + theme.name	You switch between brands or themes	6.0
Color-blind palettes	theme.accessibility.colorBlindMode	You need a deficiency-safe or high-contrast set	6.0

Built-in color palettes

The fastest way to recolor a chart is to pick one of the ten built-in palettes with theme.palette. Each palette is a curated set of series colors.

theme: {
  palette: 'palette1' // palette1 through palette10
}

See the full swatches for all ten palettes on the theme.palette reference. To apply a palette to every chart on the page, set Apex.theme.palette.

Monochrome (single-color shades)

When your series represent one thing at different intensities (a sequential or ordinal scale), use theme.monochrome to derive shades of a single color instead of distinct hues.

theme: {
  monochrome: {
    enabled: true,
    color: '#255aee',
    shadeTo: 'light',      // 'light' | 'dark'
    shadeIntensity: 0.65
  }
}

Custom series colors

For an exact set of colors rather than a preset palette, set the top-level colors array. It cycles through your colors as it assigns them to series, and it takes precedence over theme.palette.

colors: ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0']

That is the short version. For per-element control (fill, data labels, markers, gridlines) and per-series color, see the dedicated Colors guide.

Dark mode

ApexCharts has a built-in dark mode controlled by theme.mode. Setting mode: 'dark' inverts text colors, gridlines, and axis labels so they read on a dark background. The default is '', which lets the chart auto-resolve its mode (for example from a registered theme, or from the OS when follow: 'os' is set); use 'light' or 'dark' to force one.

var options = {
  chart: { type: 'line' },
  theme: {
    mode: 'dark'   // '' (auto, default) | 'light' | 'dark'
  },
  series: [{ name: 'Visits', data: [10, 41, 35, 51, 49, 62, 69] }],
  xaxis: { categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()

Dark mode does not change the chart background. The page or container background controls that. For a fully dark chart, give the container a dark background as well:

#chart {
  background: #1a1a2e;
  border-radius: 8px;
  padding: 16px;
}

Apply a theme to every chart

To theme every chart on the page from one place, set properties on the global window.Apex object before rendering any charts. Individual chart options still override these globals.

window.Apex = {
  theme: { palette: 'palette2' },
  colors: ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0']
}

Place this block before your chart initialization calls. Any chart that does not set its own theme.palette or colors inherits these values.

Design tokens and OS-aware themes (Facet, v6)

New in 6.0, the Facet feature lets a chart take its colors from CSS design tokens instead of a JavaScript color config, follow the operating system's light and dark setting on its own, and switch between named brand themes. It is included in the default build. In a tree-shaken build, add the entry point:

import ApexCharts from 'apexcharts'
import 'apexcharts/features/facet'

Read colors from CSS design tokens

Define the chart's colors once as --apx-* custom properties in your stylesheet and every chart on the page picks them up. The chart config sets no colors at all, so the chart becomes part of your design system rather than a separate copy of it.

:root {
  --apx-accent: #4f46e5;   /* primary / single-series color */
  --apx-fore: #1f2937;     /* text, labels, axis titles */
  --apx-grid: #e5e7eb;     /* gridlines and borders */
  --apx-surface: #ffffff;  /* chart background surface */
  /* multi-series palette: --apx-series-1, --apx-series-2, ... */
}

Token reading is on by default (theme.tokens: true); set it to false to opt out. A missing token is simply ignored. Tokens are re-read on every render, so if you change a token at runtime in a way that does not itself trigger a render (for example, your app swaps its design-system theme by toggling a class), call refreshTokens() to re-resolve the cascade and repaint:

document.documentElement.classList.toggle('dark')
chart.refreshTokens()

See the design-tokens example

Follow the operating system light and dark setting

Set theme.follow: 'os' and the chart tracks the operating system's prefers-color-scheme and prefers-contrast reactively, with no JavaScript and no listener to wire up. It is SSR-safe, so the first server-rendered paint already matches.

const options = {
  theme: { follow: 'os' },
}

Pair it with two token sets, one under a dark media query, and the chart flips with the OS with zero extra code:

:root { --apx-accent: #4f46e5; --apx-fore: #1f2937; --apx-surface: #ffffff; }
@media (prefers-color-scheme: dark) {
  :root { --apx-accent: #818cf8; --apx-fore: #e5e7eb; --apx-surface: #0b0f19; }
}

Register named brand themes

Bundle a palette, design tokens, and mode under a name once, then reference it from any chart with theme: { name }. Switching brand is a single updateOptions call.

ApexCharts.registerTheme('sunset', {
  palette: ['#ff6b6b', '#f06595', '#cc5de8', '#845ef7', '#ff922b'],
  tokens: { fore: '#5c3d2e', grid: '#f3d9c4', surface: '#fff8f2' },
})

const chart = new ApexCharts(el, { theme: { name: 'sunset' } /* , ... */ })

// later, switch brand without rebuilding
chart.updateOptions({ theme: { name: 'ocean' } })

Remove a registered theme with ApexCharts.unregisterTheme(name).

Color-blind-safe palettes

theme.accessibility.colorBlindMode swaps in a palette engineered to stay distinguishable under a named color-vision deficiency, or raises contrast:

const options = {
  theme: {
    accessibility: { colorBlindMode: 'deuteranopia' },
  },
}

Accepted values are deuteranopia, protanopia, tritanopia, and highContrast (wider strokes with data labels always on). See the accessible-theme example.

How ApexCharts resolves colors

When more than one color source applies, ApexCharts uses this order, highest priority first. This is why an explicit colors array always wins, and why a page-level CSS token overrides a brand default.

1. Explicit chart config: colors, theme.palette, theme.monochrome.
2. CSS design tokens: the --apx-* custom properties (when theme.tokens is on).
3. Registered theme: the palette and tokens from theme.name.
4. Built-in default: ApexCharts' default palette.

Switching themes at runtime

You have three ways to change theme after render, depending on what changed:

• Change mode or named theme: call updateOptions with the new theme. It re-themes without re-rendering the whole chart.
• Change a CSS token without a render: call refreshTokens() to re-read the cascade (see the Facet section above).
• Let the OS drive it: set theme.follow: 'os' once and do nothing at runtime.

var isDark = true

document.querySelector('#toggle-theme').addEventListener('click', function () {
  isDark = !isDark
  chart.updateOptions({
    theme: { mode: isDark ? 'dark' : 'light' }
  })
})

Frequently asked questions

Does dark mode change the chart background?

No. theme.mode: 'dark' recolors text, gridlines, and labels, but the background comes from the page or the chart container. Give the container a dark background (or set the --apx-surface token) for a fully dark chart.

Which color setting wins if I set several?

Explicit chart config (colors, theme.palette, theme.monochrome) wins, then CSS --apx-* tokens, then a registered theme referenced by theme.name, then the built-in default. See How ApexCharts resolves colors.

Do I need to import anything to use the Facet options?

Not in the default build, which includes Facet. In a tree-shaken build, add import 'apexcharts/features/facet'. The classic palette, monochrome, and mode options need no import.

Are the 6.0 Facet options backward compatible?

Yes. theme.palette, theme.monochrome, theme.mode, and colors behave exactly as before. Facet adds new options (tokens, follow, name, accessibility) without changing the old ones, and explicit config still overrides tokens and registered themes.

How do I make charts follow the OS dark mode automatically?

Set theme.follow: 'os' and define your --apx-* tokens under a @media (prefers-color-scheme: dark) query. The chart flips with the OS with no JavaScript, and it is SSR-safe.

Live examples

• Design tokens from CSS
• Named brand themes
• Color-blind-safe theme

Summary

Reach for a built-in theme.palette or a colors array for a quick recolor, theme.monochrome for single-hue data, and theme.mode for dark backgrounds (remembering to style the container too). Set any of these on window.Apex to theme every chart at once. In ApexCharts 6.0, the Facet feature connects charts to your design system: colors from --apx-* CSS tokens, theme.follow: 'os' for automatic dark mode, registerTheme() for named brands, and accessibility.colorBlindMode for accessible palettes, all resolved in a clear precedence order with explicit config always winning. For per-element color control, continue in the Colors guide; for the full option reference, see theme.