Skip to main content

Theme

The Theme feature provides comprehensive visual theme management for the financial charting library. This system enables users to customize the appearance of charts including colors, fonts, and styling options.

Key Features​

  • Multiple built-in themes (light, dark, high-contrast)
  • Custom theme creation and configuration
  • Theme persistence across sessions
  • Real-time theme switching
  • Theme inheritance and composition
  • Performance-optimized theme rendering

Architecture / Behavior​

The theme system follows a layered architecture:

  1. UI Layer: Top toolbar theme selector and settings panel
  2. API Layer: ChartApi and GlobalApi theme methods
  3. State Layer: ChartStore manages theme state
  4. Rendering Layer: ThemeEngine handles theme application

The theme flow: UI → ChartApi → ChartStore → ThemeEngine → Canvas → UI.

API Usage​

Initialization​

The theme feature is enabled by default in the chart configuration:

const chart = Chart.create(document.getElementById('container'), {
  // ... other options
  theme: 'dark', // Default theme
  enabled_features: ['theme'], // Enable theme functionality
});

Methods​

ChartApi.setTheme() - Set the current theme (global theme manager):

// Set theme to 'dark'
chart.getApi().setTheme('dark');

// Set theme to 'light'
chart.getApi().setTheme('light');

ChartApi.getTheme() - Get the current theme (global theme manager):

const currentTheme = chart.getApi().getTheme();
console.log(`Current theme: ${currentTheme}`);

GlobalApi.setTheme() - Set theme globally:

// Set theme for all charts
chart.getGlobalApi().setTheme('dark');

Configuration Options​

OptionTypeDefaultDescription
themestringobject'light'
enabled_featuresstring[]['theme']Enable/disable theme functionality
theme_persistencebooleantrueSave theme to localStorage
theme_auto_switchbooleanfalseAuto-switch based on system preference

Events​

  • theme:changed - Fired when theme changes

Customization​

  • UI styling can be customized via CSS classes
  • Theme colors can be customized per theme
  • Font settings can be customized
  • Theme inheritance can be customized
  • Theme composition can be customized

Use Cases​

  • Creating custom branding for trading platforms
  • Accessibility support (high-contrast themes)
  • Dark mode support
  • Educational purposes
  • Integration with trading platforms

Limitations​

  • Limited to built-in theme types by default
  • Some customizations may require CSS overrides
  • Performance depends on theme complexity
  • Requires proper theme implementation

✅ Supported​

  • Theme switching API methods
  • Theme state management
  • Real-time theme switching
  • Theme persistence

Feature Classification​

Core Feature - Fundamental functionality required for basic chart operation

Dependencies​

  • Requires backend? No
  • Requires storage? Yes (for persistence)
  • Requires real-time data? No
  • Requires UI controls? Yes (theme selector)

Missing Implementation Analysis​

The theme functionality is fully implemented and production-ready. All core theme capabilities are present in the codebase with proper error handling and performance optimizations.

Consistency Validation​

The theme API follows the same pattern as other API methods with consistent promise-based return values and error handling. Naming conventions are consistent with other features.

UI vs API Separation​

  • UI handles: Theme selector, preview, visual feedback
  • API exposes: setTheme(), getTheme() methods
  • Must implement manually: Custom theme definitions

User Flow​

  1. User selects theme from dropdown
  2. ChartApi validates theme
  3. ChartStore updates theme state
  4. ThemeEngine applies theme
  5. Canvas renders with new theme
  6. UI updates visual indicator

Integration with Existing Docs​

This feature should be linked from:

  • Charting section → Top Toolbar
  • API Reference → ChartApi
  • Getting Started → Quick Start Guide
  • Advanced Features → Appearance Management