Theme

Overview

This document provides an overview of the ThemeStore and its methods.
See Theme for more information.

Loads the default theme for a given scope.

loadDefaultTheme(scope: string, darkMode?: boolean): void

Parameter	Type	Description
scope	`string`	The scope for the theme.
darkMode	`boolean`	Optional. Enable dark mode.

Usage Example:

ThemeStore.loadDefaultTheme('main', true);

Sets the current theme for a given scope.

setCurrentTheme(scope: string, themeName: string, darkMode?: boolean): void

Usage Example:

ThemeStore.setCurrentTheme('main', 'DarkTheme', true);

Sets the dark mode for a given scope.

setDarkMode(scope: string, darkMode: boolean): void

Parameter	Type	Description
scope	`string`	The scope for the theme.
darkMode	`boolean`	Enable or disable dark mode.

Usage Example:

ThemeStore.setDarkMode('main', true);

Processes the CSS variables for a given theme name.

processCssVars(themeName: string): CssVars

Parameter	Type	Description
themeName	`string`	The name of the theme.

Usage Example:

const cssVars = processCssVars('DarkTheme');

Converts theme colors to CSS variables.

themeColorsToCssVariables(colors: any): any

Parameter	Type	Description
colors	`any`	The theme colors object.

Usage Example:

const cssVars = themeColorsToCssVariables(theme.colors);

Converts a theme color name to a CSS variable name.

themeColorNameToCssVariable(name: string): string

Parameter	Type	Description
name	`string`	The name of the color.

Usage Example:

const cssVarName = themeColorNameToCssVariable('primaryColor');

Applies the theme CSS variables to a native HTML element.

applyThemeToNativeElement(element: HTMLElement, cssVars?: Record<string, string>): void

Parameter	Type	Description
element	`HTMLElement`	The HTML element.
cssVars	`Record<string, string>`	Optional. The CSS variables.

Usage Example:

applyThemeToNativeElement(document.body, cssVars.light);