Theme Customization

ChartSpire supports built-in themes and custom themes via themeCustom. Themes control the ChartSpire UI (sidebar, panels, popovers). For chart-level styling (candles, grid, axes), see Custom Styles. Themes switch in real time without recreating the chart.

Configuration

new ChartSpire({
  theme: 'Dark Theme',
  themeCustom: [],
  themesEnabled: true,
  // ...
})

Option	Type	Default	Description
theme	string	—	Initial theme (built-in English key, or custom name / displayName)
themeCustom	CustomTheme[]	—	Custom themes to register at init
themesEnabled	boolean	true	Show theme selector in bottom bar

Built-in Themes

'Light Theme 1', 'Light Theme 2', 'Midnight Theme', 'Dark Theme', 'Dark Gray Theme', 'Blue Theme', 'Red Theme', 'Green Theme', 'Yellow Theme', 'Pink Theme'

// Set on init
new ChartSpire({ theme: 'Dark Theme' })

// Or change at runtime
chart.setTheme('Light Theme 1')

Custom Themes

Register custom themes via themeCustom at initialization. Users can select them in the theme dropdown when themesEnabled is true, but cannot create or edit themes in the UI.

import { ChartSpire, type CustomTheme } from '@chartspire/ui'

const customThemes: CustomTheme[] = [{
  name: 'corporate-blue',
  displayName: 'Corporate Blue',
  colors: {
    primaryColor: '#0066CC',
    selectedColor: 'rgba(0, 102, 204, 0.15)',
    hoverBackgroundColor: 'rgba(0, 102, 204, 0.1)',
    backgroundColor: '#F8F9FA',
    popoverBackgroundColor: '#FFFFFF',
    textColor: '#212529',
    textSecondColor: '#6C757D',
    borderColor: '#DEE2E6'
  }
}]

new ChartSpire({
  themeCustom: customThemes,
  theme: 'corporate-blue', // CustomTheme.name (also accepts displayName)
})

// Runtime — accepts name or displayName; stores CustomTheme.name
chart.setTheme('corporate-blue')
chart.setTheme('Corporate Blue')

CustomTheme Interface

interface CustomTheme {
  name: string
  displayName: string
  colors: ThemeColors
}

interface ThemeColors {
  primaryColor: string
  selectedColor: string
  hoverBackgroundColor: string
  backgroundColor: string
  popoverBackgroundColor: string
  textColor: string
  textSecondColor: string
  borderColor: string
}

• name — Stable id used for data-theme and getTheme() / setTheme() storage.
• displayName — Label in the theme dropdown. Must not match a built-in theme name.
• Constructor theme and setTheme accept either name or displayName for custom themes; the stored value is always name.