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, and 'auto' follows prefers-color-scheme. 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.

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' } } },
]