Theming

Overview

The chart theme is controlled by a single theme string at the top level of RadiantChartOptions. Three values are accepted:

• "light" — white canvas, slate axes (default)
• "dark" — near-black canvas, muted axes
• "system" — follows the OS dark-mode preference

Usage

Imperative API

<RadiantChart
  options={{
    data,
    series: [{ type: 'bar', xKey: 'month', yKey: 'revenue' }],
    theme: 'dark',   // 'light' | 'dark' | 'system'
  }}
/>

Declarative API

<Chart data={data} theme="dark">
  <Bar xKey="month" yKey="revenue" />
</Chart>

System Theme

When theme: "system" is set, the ThemeManager subscribes to window.matchMedia('(prefers-color-scheme: dark)'). The chart re-renders automatically when the OS preference changes — no page reload or React state update required.

Custom Palettes

Override the default series color sequence with the top-level palette option. Colors are applied in order and cycle when there are more series than palette entries.

<RadiantChart
  options={{
    data,
    series: [
      { type: 'line', xKey: 'month', yKey: 'revenue' },
      { type: 'line', xKey: 'month', yKey: 'cost' },
    ],
    palette: ['#f43f5e', '#8b5cf6'],
  }}
/>

Per-Series Color Overrides

Set explicit fill or stroke on individual series to override the palette for that series only:

series: [
  { type: 'bar', xKey: 'month', yKey: 'revenue', fill: '#6366f1' },
  { type: 'bar', xKey: 'month', yKey: 'cost',    fill: '#f43f5e' },
]

Theme Token Reference

The following visual properties are derived from the active theme: