Dark mode

theme.mode is 'light', 'dark' or 'auto'. Dark mode is a class on the container rather than only a media query, so a dashboard can force it independently of the operating system. 'auto' resolves prefers-color-scheme at render and does not subscribe to it: the buttons below call updateOptions, which is what re-resolves it, so a map left alone keeps the mode it opened with even after the OS preference changes. To follow the OS, re-apply the mode from a matchMedia('(prefers-color-scheme: dark)') change listener. The palette is unchanged: what changes is the chrome, the no-data colour and the text.

CSS custom properties

Every piece of chrome the library draws reads from --apexmaps-* on the container, so brand styling needs no options at all. This map has no theme configuration: the surrounding CSS sets eight properties and the legend, tooltip and attribution follow. Hover a country to see the tooltip pick it up.

Family tokens

The same five --apx-* tokens every ApexCharts product reads, so one brand declaration themes a whole dashboard. Nothing here sets a single --apexmaps-* property or a theme option: the wrapper declares --apx-surface, --apx-fore, --apx-grid and --apx-accent, and the legend, tooltip and focus ring inherit them. Anything you set yourself still wins over them, and dark mode keeps its own palette.

Responsive rules

Drag the container's bottom-right corner to resize it. responsive rules match on measured width, narrowest matching breakpoint winning, so they can be declared in any order. Here the legend moves and the labels switch off below 560px, and the map keeps the reader's position across the resize rather than refitting and silently discarding wherever they had navigated to.

responsive: [
  { breakpoint: 560, options: { legend: { position: 'bottom' }, dataLabels: { enabled: false } } },
  { breakpoint: 900, options: { legend: { position: 'right' } } },
]