Theming overview

Theming means choosing colors and surfaces so the chart fits your product — dark fintech dashboard, light news embed, brand accent on the toolbar.

Exeria has two independent theme systems. Mixing them up is the most common beginner mistake.

Loading chart…

This preview uses a custom runtime theme (candles + grid).

Layer 1 — Chart runtime (the canvas)

Package: @efixdata/exeria-chart
Controls: candles, line chart, grid, axes, crosshair, default drawing colors, tooltips

import { createChart } from "@efixdata/exeria-chart";

const chart = createChart({
  container,
  theme: runtimeTheme,
  themeVariant: "dark", // or "light"
});

themeVariant tells the engine which color variant to read when your theme object defines both light and dark keys (the live theme creator outputs this shape).

What you typically customize

Area	User-visible effect
Background	Plot and axis backdrop
Grid	Horizontal / vertical guides
Candle up / down	Bullish / bearish bodies and wicks
Axis text	Price and time labels
Crosshair	Cursor lines and labels
Chart line / fill	Line mode and area under line
Tool default	New drawings without custom color

Change theme after mount

chart.applyChartTheme(runtimeTheme, "dark");

Or use the settings API (same fields as the ChartUI dialog):

const settings = chart.getChartAppearanceSettings();
settings.candleUpColor = "#22c55e";
chart.applyChartAppearanceSettings(settings);

Guide: Chart settings. Tutorial: Custom theme.

Layer 2 — React UI (the chrome)

Package: @efixdata/exeria-chart-ui-react
Controls: top toolbar, left drawing menu, dialogs, inputs, scrollbars, split buttons

import { ChartUI } from "@efixdata/exeria-chart-ui-react";

<ChartUI
  chart={chart}
  theme={{
    gap: 8,
    accentColor: "#14f7ab",
    toolbar: {
      background: "#111827",
      showShareChartButton: true,
      showChartScaleSwitch: true,
      showCurrency: true,
    },
    subMenu: { background: "#0f172a" },
    dialog: {},
    inputs: {},
    scrollBar: {},
    splitButton: {},
  }}
>
  <div ref={containerRef} style={{ width: "100%", height: "100%" }} />
</ChartUI>

Only applies when you use ChartUI. Vanilla integrations ignore this layer.

Deep dive: React UI integration.

Side-by-side cheat sheet

Question	Runtime (createChart)	UI (ChartUI)
Candle colors?	✅	❌
Grid color?	✅	❌
Toolbar background?	❌	✅
Settings dialog colors?	❌	✅
Share button visibility?	❌	✅ (theme.toolbar)
Works without React?	✅	❌

Six built-in presets

The same presets appear in Chart settings → Theme templates and in the live theme creator:

ID	Name	Mode
trading-dark	Trading Dark	Dark
midnight	Midnight	Dark
carbon	Carbon	Dark
day	Day	Light
paper	Pearl	Light
onyx	Monochrome	Light

Presets update both appearance settings and UI chrome when applied through ChartUI.

Light and dark variants

Production apps often ship both modes:

1. Build runtimeTheme with light and dark branches (live creator does this).
2. Pass themeVariant when creating the chart or call applyChartTheme(theme, variant) on toggle.
3. Pass matching uiThemes.dark / uiThemes.light to ChartUI.

const variant = userPrefersDark ? "dark" : "light";

chart.applyChartTheme(runtimeTheme, variant);
// React: <ChartUI theme={uiThemes[variant]} … />

Share and export styling

Share menu watermark and copy text use shareConfig on ChartUI — not the runtime theme:

<ChartUI
  shareConfig={{
    watermarkSvg: "<svg>…</svg>",
    templateText: "Chart snapshot",
  }}
/>

Three ways to theme (pick your path)

Path	Best for
Live theme creator	Visual tuning + copy-paste code
Constructor theme	Fixed brand colors in code
Chart settings API	User-controlled themes you persist

Path	Page
Visual	Live theme creator
Tutorial	Custom theme
User dialog	Chart settings
Persist	Save and restore settings

Quick troubleshooting

Symptom	Likely cause
Toolbar still default after editing candles	You changed runtime only — edit ChartUI theme
Preset in UI does not match your code	Apply same preset via importChartSettingsTemplate or copy from creator
Colors reset on reload	Persist exportChartSettingsTemplate() JSON

What is next?

• Live theme creator — interactive preview
• Advanced React UI integration — toolbar toggles
• Theming hub