@jimka/typescript-ui

Appearance

@jimka/typescript-ui / core / ThemeManager

Class: ThemeManager ​

Defined in: src/typescript/lib/core/Theme.ts:766

Singleton manager that applies a theme by writing CSS custom properties and inline styles onto the document root and body elements.

Example ​

typescript
import { ThemeManager, DefaultTheme, DarkTheme } from '@jimka/typescript-ui/core';

ThemeManager.setTheme(DefaultTheme); // light
ThemeManager.setTheme(DarkTheme);    // dark

Constructors ​

new ThemeManager() ​

ts
new ThemeManager(): ThemeManager

Returns ​

ThemeManager

Methods ​

getTheme() ​

ts
static getTheme(): Theme

Defined in: src/typescript/lib/core/Theme.ts:818

Returns the currently active theme.

Returns ​

Theme

The Theme object that was last passed to setTheme, defaulting to DefaultTheme.

onThemeChange() ​

ts
static onThemeChange(listener: () => void): () => void

Defined in: src/typescript/lib/core/Theme.ts:776

Subscribes a listener that is called whenever the active theme changes.

Parameters ​

listener ​

() => void

Called after CSS variables have been updated, so getComputedStyle returns new values.

Returns ​

Function

A cleanup function that removes the listener when called.

Returns ​

void

setTheme() ​

ts
static setTheme(theme: Theme): void

Defined in: src/typescript/lib/core/Theme.ts:795

Applies a theme by writing CSS variables onto :root and updating body/html styles.

Parameters ​

theme ​

Theme

The theme object to activate.

Returns ​

void

Remarks ​

Sets document.documentElement.style.colorScheme, color, fontFamily, fontSize, and document.body.style.backgroundColor / color in addition to the CSS custom properties, so both CSS-variable consumers and direct inline-style consumers are updated. <html> is targeted (in addition to <body>) because Window components are appended to document.documentElement, so text in floating windows must inherit from <html>.