Themes API

Control chart light/dark mode with theme / setTheme(), and optionally set an exact background hex via themeColor.

Interactive lab

Open examples/themes-lab.html (from the SDK package root: npm run serve, then http://127.0.0.1:8080/examples/themes-lab.html ) to verify:

• Construct with theme: "light" / "dark"
• Runtime setTheme("light" | "dark")
• Optional themeColor hex (including custom colors)
• Explicit construct options vs localStorage gocharting-theme-color
• Live demo WebSocket bars (wss://gocharting.com/sdk/ws)

Preferred API: theme

Pass "light" or "dark" to createChart() (or the <GoCharting /> component).
When themeColor is omitted, the SDK maps:

import { createChart } from "@gocharting/chart-sdk";
 
const chart = createChart("#chart", {
	symbol: "BYBIT:FUTURE:BTCUSDT",
	interval: "1D",
	datafeed: myDatafeed,
	licenseKey: "YOUR_LICENSE_KEY",
	theme: "dark",
});

Runtime: setTheme()

chart.setTheme("light" | "dark"): void

chart.setTheme("dark");

Toggle example:

let mode = "light";
 
document.getElementById("theme-toggle").addEventListener("click", () => {
	mode = mode === "light" ? "dark" : "light";
	chart.setTheme(mode);
});

Optional: themeColor (hex background)

themeColor is a CSS hex color for the app chrome (e.g. #22292f, #570f0f).
It is not "light" or "dark" — use theme for that.

Any #RRGGBB value is supported. Built-in tuned palettes also exist for:

#ffffff, #22292f, #e3342f, #f6993f, #ffed4a, #38c172, #4dc0b5, #3490dc, #6574cd, #9561e2, #f66d9b.

createChart("#chart", {
	symbol: "BYBIT:FUTURE:BTCUSDT",
	interval: "1D",
	datafeed: myDatafeed,
	licenseKey: "YOUR_LICENSE_KEY",
	themeColor: "#570f0f", // arbitrary hex chrome tint
});

Rules of thumb:

• Prefer theme only for normal light/dark switching.
• Use themeColor when you need a specific background hex.
• Explicit theme / themeColor on createChart win over a saved gocharting-theme-color in localStorage.
• setTheme("light"|"dark") switches the named mode at runtime (maps to #ffffff / #22292f).

Construct-time options (advanced)

For deeper chrome styling beyond light/dark:

See Configuration for full option lists.

System preference

const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
 
const chart = createChart("#chart", {
	symbol: "BYBIT:FUTURE:BTCUSDT",
	interval: "1D",
	datafeed: myDatafeed,
	licenseKey: "YOUR_LICENSE_KEY",
	theme: prefersDark ? "dark" : "light",
});
 
window
	.matchMedia("(prefers-color-scheme: dark)")
	.addEventListener("change", (e) => {
		chart.setTheme(e.matches ? "dark" : "light");
	});

Reference

Related

• Configuration — full construct options
• Chart API — createChart / widget methods
• GoCharting component — React props (theme, themeColor)