Theme tokens, live

import { createFinancialChart, darkTheme, lightTheme, type Theme } from "@ortex-charts/financial";

// A theme is a plain object. Start from a built-in one and override what
// your brand owns; anything you do not name keeps the built-in value.
const tokens: Theme = {
    ...(theme === "light" ? lightTheme : darkTheme),
    name: "your-brand",
    up: "#3AAEA9",
    down: "#EF4E5A",
    upWick: "#3AAEA9",
    downWick: "#EF4E5A",
};

const chart = createFinancialChart(box, {
    theme: tokens,
    timeZone: TIME_ZONE,
    resolution: "1D",
    watermark: { text: SYMBOL, visible: true, fontSize: 40 },
    data: bars,
});
chart.addIndicator("ema", { length: 21 });

/** Every control on this page ends here: change a token, repaint. */
function apply(patch: Partial<Theme>): void {
    Object.assign(tokens, patch);
    chart.chart.setTheme(tokens);
}

/** Grid lines are a chart option rather than a color, so they go the other way. */
function setGrid(on: boolean): void {
    chart.chart.applyOptions({ grid: { horizontal: on, vertical: on } });
}