Themes

@sixtyfold/themes provides immutable, chart-only appearance presets for Line and Stock charts. Presets style the chart background, grid, axes, tooltip, selection, range selector, and series or candle colors. Your application continues to own its data, labels, units, formatting, localization, and behavior.

Apply a theme

Use the chart-specific entry point so a Line application does not depend on Stock, and vice versa:

import { applyLineTheme } from "@sixtyfold/themes/line";

applyLineTheme(lineChart, "mainframe");

import { applyStockTheme } from "@sixtyfold/themes/stock";

applyStockTheme(stockChart, "default");

Theme identifiers are stable runtime values. The default identifier selects Midnight. Presets and catalog values are frozen; treat them as read-only.

Themes on this website

This website offers seven dark and seven light themes:

When no choice is saved, the website uses Azulejo for a light browser preference and Midnight otherwise. The package exports this same fourteen-theme catalog; applications may expose any subset that suits their interface.

Build a selector

Read identifiers and labels from the catalog instead of duplicating them:

import {
  PUBLIC_THEME_IDS,
  getLineThemePreset,
} from "@sixtyfold/themes/line";

const choices = PUBLIC_THEME_IDS.map((id) => {
  const preset = getLineThemePreset(id);
  return {
    id: preset.id,
    label: preset.label,
    colorScheme: preset.colorScheme,
  };
});

Persist the id, display the label, and use colorScheme to group light and dark choices.

Preserve chart meaning

Line themes apply a repeating visual series palette by index. Keep series type, stacking, labels, units, and formatters in application configuration. If a structural setting uses an appearance value—such as width: 0 to hide a range center or boundary—reapply that setting after changing the theme.

Themes do not translate chart text, change document.lang or document.dir, or style controls outside the canvas.

See the generated Theme functions, types, and constants for the complete API.