ThemeManager

Manages the editor's color themes.

Stores named theme definitions (each containing light and dark color palettes alongside shared properties like font size). The current theme is resolved by combining the current theme name with the user's color mode preference.

Terminology: - Theme (TLTheme): A named set of colors and typographic values for both light and dark modes. - Color mode ('light' | 'dark'): The resolved appearance mode, derived from the user's colorScheme preference ('light' | 'dark' | 'system'). Access via getColorMode().

class ThemeManager {}

Constructs a new instance of the ThemeManager class

Parameters

Editor;

{
  initial: TLThemeId;
  themes: TLThemes;
};

Methods

Clean up any resources held by the manager.

dispose(): void;

Get the current color mode based on the user's dark mode preference.

getColorMode(): "dark" | "light";

getCurrentTheme(): TLTheme;

Get the id of the current theme.

getCurrentThemeId(): TLThemeId;

Get a single theme definition by id.

getTheme(id: TLThemeId): TLTheme | undefined;

Parameters

TLThemeId;

Returns

TLTheme | undefined;

Get all registered theme definitions.

getThemes(): TLThemes;

Set the current theme by id. The theme must have been previously registered.

setCurrentTheme(id: TLThemeId): void;

Parameters

TLThemeId;

Returns

void;

Register or update a named theme definition.

updateTheme(theme: TLTheme): void;

Parameters

TLTheme;

Returns

void;

Replace all theme definitions, or update them via a callback that receives a deep copy.

updateThemes(themes: ((themes: TLThemes) => TLThemes) | TLThemes): void;

Parameters

((themes: TLThemes) => TLThemes) | TLThemes;

Returns

void;