theme

Configuration Structure

theme: {
  mode: 'light' | 'dark' | '',
  palette: string,
  tokens: boolean,
  follow: 'os' | false,
  name: string,
  monochrome: { ... },
    enabled: boolean,
    color: string,
    shadeTo: 'light' | 'dark',
    shadeIntensity: number,
  accessibility: { ... },
    colorBlindMode: 'deuteranopia' | 'protanopia' | ...,
}

mode

Default: ''

Changing the theme.mode will also update the text and background colors of the chart.
Available Options

  • light
  • dark

palette

Default: 'palette1'

Available palettes - palette1 to palette10

palette1#008FFB#00E396#FEB019#FF4560#775DD0
palette2#3f51b5#03a9f4#4caf50#f9ce1d#FF9800
palette3#33b2df#546E7A#d4526e#13d8aa#A5978B
palette4#4ecdc4#c7f464#81D4FA#546E7A#fd6a6a
palette5#2b908f#f9a3a4#90ee7e#fa4443#69d2e7
palette6#449DD1#F86624#EA3546#662E9B#C5D86D
palette7#D7263D#1B998B#2E294E#F46036#E2C044
palette8#662E9B#F86624#F9C80E#EA3546#43BCCD
palette9#5C4742#A5978B#8D5B4C#5A2A27#C4BBAF
palette10#A300D6#7D02EB#5653FE#2983FF#00B1F2

tokens

Default: false

Facet: read --apx-* CSS custom properties from the cascade as the chart's design tokens (accent, foreground, grid, surface, and a series palette). Requires the facet feature (import 'apexcharts/features/facet'). Tokens are re-read on each render; after changing a token at runtime without triggering a render, call chart.refreshTokens().

:root { --apx-accent: #4f46e5; --apx-grid: #e5e7eb; --apx-surface: #fff; }

See the Themes and Dark Mode guides.

follow

Default: false

Facet: follow the operating system's appearance with no JavaScript. Set 'os' to track the system light/dark and contrast preferences; leave false to ignore them. Requires import 'apexcharts/features/facet'.

name

Default: ''

Facet: apply a named theme previously registered with ApexCharts.registerTheme(name, def).

ApexCharts.registerTheme('brand', { palette: ['#4f46e5', '#0ea5e9'], tokens: { accent: '#4f46e5' } })

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

monochrome

Single color is used as a base and shades are generated from that color.

enabled

theme.monochrome.enabled
Default: false

Whether to enable monochrome theme option.

color

theme.monochrome.color
Default: '#008FFB'

A hex color which will be used as the base color for generating shades

shadeTo

theme.monochrome.shadeTo
Default: 'light'

Accepts either light or dark

shadeIntensity

theme.monochrome.shadeIntensity
Default: 0.65

What should be the intensity while generating shades Accepts from 0 to 1

accessibility

Color-blind-friendly palette overrides. When a mode is selected, ApexCharts remaps the series colors so that adjacent series remain visually distinguishable for users with the chosen form of color-vision deficiency.

colorBlindMode

theme.accessibility.colorBlindMode
Default: ''

Pick a color-blind-safe palette. Available Options:

  • '' (default, no remapping)
  • deuteranopia: red/green deficiency (most common form).
  • protanopia: red/green deficiency (red-weak variant).
  • tritanopia: blue/yellow deficiency.
  • highContrast: maximum contrast palette, useful for low-vision users or print.
theme: {
  accessibility: {
    colorBlindMode: 'deuteranopia'
  }
}