Skip to content
Aeris

Guides

Theming

Light and dark themes, palettes, colors, and fonts.

Light and dark

Light is the default. For dark mode, set data-theme="dark" (or the dark class) on a root element so the stylesheet switches, and set the chart's theme option.

Dark mode
document.documentElement.dataset.theme = "dark";
chart.applyOptions({ theme: "dark" });

// or start from the theme's options and adjust them
import { theme_options } from "@aeristerminal/aeris-charts";
chart.applyOptions({ ...theme_options("dark"), layout: { fontSize: 13 } });

Palettes

light_theme and dark_theme are the built-in palettes. theme_palette(name) returns one, and popover_palette(name) returns the colors for menus and popovers, so your own chrome can match the chart.

Colors and fonts

Layout colors
chart.applyOptions({
  layout: {
    background: { type: "solid", color: "#0f1115" },
    textColor: "#d1d4dc",
    bullishColor: "#26a69a",
    bearishColor: "#ef5350",
    fontFamily: "Inter, system-ui, sans-serif",
    fontSize: 12,
  },
});

Chart labels use the system UI font stack until you set layout.fontFamily, so a web font that loads late never shifts price labels. reset_style_to_defaults() returns every style to the theme defaults.