Skip to Content
API ReferenceThemes

🎨 Themes API

The Themes API allows you to customize the visual appearance of the chart with built-in themes and custom colors.

🎯 Theme Configuration

Theme Properties

type ChartConfig = {
	theme?: ChartTheme;      // Built-in theme: "light" | "dark" (default: "light")
	themeColor?: string;     // Custom background color (e.g., "#1a1a1a")
	// ... other properties
}
 
type ChartTheme = "light" | "dark";

Basic Theme Setup

import { createChart } from "@gocharting/chart-sdk";
 
// Light theme (default)
const chart = createChart("#chart", {
	symbol: "AAPL",
	interval: "1D",
	datafeed: myDatafeed,
	licenseKey: "YOUR_LICENSE_KEY",
	theme: "light",
});
 
// Dark theme
const chart = createChart("#chart", {
	symbol: "AAPL",
	interval: "1D",
	datafeed: myDatafeed,
	licenseKey: "YOUR_LICENSE_KEY",
	theme: "dark",
});

🔄 Dynamic Theme Switching

Using setTheme() Method

The setTheme() method allows you to change the theme dynamically after chart creation.

Signature:

setTheme(newTheme: "light" | "dark"): void

Example:

// Create chart with light theme
const chart = createChart("#chart", {
	symbol: "AAPL",
	interval: "1D",
	datafeed: myDatafeed,
	licenseKey: "YOUR_LICENSE_KEY",
	theme: "light",
	onReady: (chartInstance) => {
		// Switch to dark theme after 5 seconds
		setTimeout(() => {
			chartInstance.setTheme("dark");
		}, 5000);
	},
});

Theme Toggle Example

let currentTheme = "light";
 
const chart = createChart("#chart", {
	symbol: "AAPL",
	interval: "1D",
	datafeed: myDatafeed,
	licenseKey: "YOUR_LICENSE_KEY",
	theme: currentTheme,
	onReady: (chartInstance) => {
		// Add theme toggle button
		document.getElementById("theme-toggle").addEventListener("click", () => {
			currentTheme = currentTheme === "light" ? "dark" : "light";
			chartInstance.setTheme(currentTheme);
		});
	},
});

🎨 Custom Theme Colors

Using themeColor Property

The themeColor property allows you to set a custom background color for the chart.

// Custom dark background
const chart = createChart("#chart", {
	symbol: "AAPL",
	interval: "1D",
	datafeed: myDatafeed,
	licenseKey: "YOUR_LICENSE_KEY",
	theme: "dark",
	themeColor: "#1a1a1a", // Custom dark gray
});
 
// Custom light background
const chart = createChart("#chart", {
	symbol: "AAPL",
	interval: "1D",
	datafeed: myDatafeed,
	licenseKey: "YOUR_LICENSE_KEY",
	theme: "light",
	themeColor: "#f5f5f5", // Custom light gray
});

💡 Usage Examples

Example 1: System Theme Detection

// Detect system theme preference
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
 
const chart = createChart("#chart", {
	symbol: "AAPL",
	interval: "1D",
	datafeed: myDatafeed,
	licenseKey: "YOUR_LICENSE_KEY",
	theme: prefersDark ? "dark" : "light",
});
 
// Listen for system theme changes
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
	const chartInstance = chart.getChartInstance();
	if (chartInstance) {
		chartInstance.setTheme(e.matches ? "dark" : "light");
	}
});

Example 2: Theme Persistence

// Load saved theme from localStorage
const savedTheme = localStorage.getItem("chartTheme") || "light";
 
const chart = createChart("#chart", {
	symbol: "AAPL",
	interval: "1D",
	datafeed: myDatafeed,
	licenseKey: "YOUR_LICENSE_KEY",
	theme: savedTheme,
	onReady: (chartInstance) => {
		// Save theme when changed
		document.getElementById("theme-toggle").addEventListener("click", () => {
			const newTheme = savedTheme === "light" ? "dark" : "light";
			chartInstance.setTheme(newTheme);
			localStorage.setItem("chartTheme", newTheme);
		});
	},
});

Example 3: Multi-Theme Application

const themes = {
	light: {
		theme: "light",
		themeColor: "#ffffff",
	},
	dark: {
		theme: "dark",
		themeColor: "#1a1a1a",
	},
	midnight: {
		theme: "dark",
		themeColor: "#0a0a0a",
	},
	sepia: {
		theme: "light",
		themeColor: "#f4ecd8",
	},
};
 
let currentThemeName = "light";
 
const chart = createChart("#chart", {
	symbol: "AAPL",
	interval: "1D",
	datafeed: myDatafeed,
	licenseKey: "YOUR_LICENSE_KEY",
	...themes[currentThemeName],
	onReady: (chartInstance) => {
		// Theme selector
		document.getElementById("theme-select").addEventListener("change", (e) => {
			currentThemeName = e.target.value;
			const selectedTheme = themes[currentThemeName];
			chartInstance.setTheme(selectedTheme.theme);
			// Note: themeColor cannot be changed dynamically after creation
		});
	},
});

Example 4: Responsive Theme

function getResponsiveTheme() {
	const hour = new Date().getHours();
	// Dark theme from 6 PM to 6 AM
	return hour >= 18 || hour < 6 ? "dark" : "light";
}
 
const chart = createChart("#chart", {
	symbol: "AAPL",
	interval: "1D",
	datafeed: myDatafeed,
	licenseKey: "YOUR_LICENSE_KEY",
	theme: getResponsiveTheme(),
	onReady: (chartInstance) => {
		// Update theme every hour
		setInterval(() => {
			chartInstance.setTheme(getResponsiveTheme());
		}, 60 * 60 * 1000); // 1 hour
	},
});

📋 Theme Reference

Built-in Themes

ThemeDescriptionUse Case
lightLight background with dark text and elementsDefault, daytime viewing
darkDark background with light text and elementsNight mode, reduced eye strain

Theme Properties

PropertyTypeDefaultDescription
theme"light" | "dark""light"Built-in theme to use
themeColorstring-Custom background color (hex, rgb, or named)

ChartInstance Methods

MethodDescription
setTheme(newTheme)Change theme dynamically (“light” or “dark”)
Important

Theme Configuration Notes:

  1. themeColor Limitation: The themeColor property can only be set during chart creation. It cannot be changed dynamically using setTheme().
  2. Theme vs themeColor:
    • theme controls the overall color scheme (light/dark)
    • themeColor sets a custom background color
    • Both can be used together
  3. Browser Compatibility: System theme detection requires modern browsers with prefers-color-scheme support.

🔗 Related Documentation

For complete working examples, see the Examples section.

Last updated on
Helper FunctionsTrading API