Theming

SwiftChart ships with four built-in themes. Each is a complete palette covering background, surface, grid, axes, series colors, and the floating tooltip panel.

Built-in themes

Custom themes

Register your own palette and reference it by name from anywhere:

import { addTheme } from '@arshad-shah/swift-chart';

addTheme('neon', {
  bg: '#0a0a0f',
  surface: '#111118',
  grid: '#ffffff08',
  text: '#e0e0ff',
  textMuted: '#6060a0',
  axis: '#2a2a4a',
  colors: ['#ff00ff', '#00ffff', '#ffff00', '#ff6600'],
});

new LineChart('#chart', { theme: 'neon' });

You can also pass an inline Theme object instead of a name. See the Core API reference for the full Theme shape.

addTheme is also re-exported from @arshad-shah/swift-chart/react, so React-only consumers can register themes without importing the core entry:

import { addTheme, Line } from '@arshad-shah/swift-chart/react';

Tooltip colours

The floating tooltip derives its colours from the active theme:

• panel background → theme.surface
• panel border → theme.axis
• primary text → theme.text
• muted/label text → theme.textMuted

Switching themes at runtime (chart.setTheme('arctic') or <Line theme="arctic" />) repaints the tooltip in step. To override any of those independently of the rest of the palette, set the optional tooltipBg, tooltipBorder, and tooltipText fields on a custom theme:

addTheme('brand', {
  bg: '#ffffff', surface: '#fafafa', grid: '#eeeeee',
  text: '#111111', textMuted: '#666666', axis: '#cccccc',
  colors: ['#5b8cff', '#ff5b8c', '#5bff8c'],
  tooltipBg: '#1a1a1a',      // dark tooltip on a light theme
  tooltipBorder: '#5b8cff',
  tooltipText: '#ffffff',
});

The semantic fields positive, negative, and onAccent are also part of the Theme shape; if omitted from a custom theme, they default to a green/red/white set so existing themes keep working.

Diagnostics

In development builds (process.env.NODE_ENV !== 'production'), the theme resolver surfaces three classes of misuse via console.warn:

• Unknown theme name — theme: 'rd-light' when no addTheme('rd-light', …) call has run. The chart falls back to midnight and you see [SwiftChart] Theme "rd-light" is not registered — falling back to "midnight". Available themes: ….
• Missing required fields on a custom theme — addTheme('brand', { bg: '#fff' }) (forgetting surface/grid/text/textMuted/axis/colors). Missing fields are backfilled from midnight so the chart still renders, and you see which fields were filled in.
• Shadowing a built-in name — addTheme('midnight', …). The override still applies (this is intentional flexibility), but a warning fires so accidental overrides aren’t silent.

Production builds drop the warnings entirely so they don’t leak into your users’ devtools.