Skip to content

SI_THEME_DOM_TARGET Type documentation

InjectionToken<SiThemeDomTarget> = ...
Variable
Theme DOM target. The default implementation targets the current document.

Types Documentation

DOM boundary controlled by SiThemeService .
Properties
Element that receives theme and color-scheme classes.
element: HTMLElement
Event target for the legacy theme-switch event.
eventTarget?: EventTarget
CSS selector used for runtime theme variables.
rootSelector: string
Methods
(style: HTMLStyleElement) => void
Parameters
style: HTMLStyleElement
(callback: (element: HTMLElement) => void) => void
Parameters
callback: (element: HTMLElement) => void
(id: string) => (HTMLStyleElement | null)
Parameters
id: string
(element: HTMLElement) => () => void
Parameters
element: HTMLElement
(colorScheme: ColorScheme) => void
Parameters
colorScheme: ColorScheme
(ColorScheme | "auto")
Properties
A map of icons that overrides the default Element icons. The key must be the key of the original icon that should be overridden. The value has to be a data SVG string.

Example:
{
  elementUser: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>...</svg>"
}
icons?: Record<string, string>
name: string
schemes: ThemeColorSchemes
Properties
dark?: ThemeColorScheme
light?: ThemeColorScheme
SiThemeStore object is used by the theme service to load and store the themes. You can inject your own implementation to provide a backend implementation. Otherwise a localStorage based implementation is used.
Constructor
() => {}
Methods
(name: string) => Observable<boolean>
Sets the theme with the given name to active.
Returns True on success, otherwise false.
Parameters
The name of the theme to become active.
name: string
Deactivate any active theme and makes the element theme the default one.
Returns True on success, otherwise false.
deactivateTheme: () => Observable<boolean>
(name: string) => Observable<boolean>
Deletes the theme with the given name from the store.
Returns True on success, otherwise false. All nicely wrapped in an observable that may also emit errors. Returns false, if the theme does not exist.
Parameters
The name of the theme to be deleted.
name: string
Load and return an alternative custom theme, other then the default element theme. This method is invoked initially to check for an alternative custom theme.
Returns The active theme to be used, or undefined if the default element theme shall be used. All wrapped in an observable that can also emit errors.
loadActiveTheme: () => Observable<(Theme | undefined)>
(name: string) => Observable<(Theme | undefined)>
Load theme with the given name .
Returns Observable with the named theme or undefined if no such theme exist.
Parameters
The name of the theme to be returned.
name: string
Load and return the available theme names.
Returns An Observable of available theme names, other than the default element theme.
loadThemeNames: () => Observable<string[]>
(theme: Theme) => Observable<boolean>
Saves a theme to the store. The name shall not be empty. A theme with identical name gets overwritten.
Returns True on success, otherwise false. All nicely wrapped in an observable that may also emit errors.
Parameters
The theme to be saved.
theme: Theme
("light" | "dark")
{ [ key: string ]: string } }
Constructor
() => {}
Properties
The current color scheme. (e.g. light or dark).
_resolvedColorScheme: (ThemeType | undefined) = 'light'
All available theme names, including element theme name.
_themeNames: string[] = ...
The name of the theme that is active. Theme name element is the default.
activeThemeName?: string
darkMediaQuery?: MediaQueryList
document: Document = ...
isBrowser: boolean = ...
mediaQueryListener?: () => void
previewTheme?: Theme
Emits events when the color scheme changes.
resolvedColorScheme$: Observable<keyof ThemeColorSchemes> = this.resolvedColorSchemeSub.asObservable()
resolvedColorSchemeSub: ReplaySubject<keyof ThemeColorSchemes> = ...
Emits events when the currently applied theme changes. Either by changing to another theme or by re-applying a theme with updated properties. When switching to default theme element, undefined is emitted.
themeChange: EventEmitter<(Theme | undefined)> = ...
Icon overrides by the currently activeTheme.
themeIcons: WritableSignal<Record<string, string>> = {}
Emits events when the list of available theme names changes.
themeNames$: Observable<string[]> = this.themeNamesSub.asObservable()
themeNamesSub: ReplaySubject<string[]> = ...
themes: Map<string, Theme> = ...
themeStore: SiThemeStore = ...
themeTarget: SiThemeDomTarget = ...
Accessors
The current color scheme. (e.g. light or dark).
get resolvedColorScheme: (ThemeType | undefined)
All available theme names, including element theme name.
get themeNames: string[]
Methods
(theme: Theme) => void
Parameters
theme?: Theme
(theme: Theme) => Observable<boolean>
Adds or updates the given theme in the theme store.
Returns true if the theme was saved successfully.
Parameters
The theme to be saved.
theme: Theme
(theme: Theme, type: ThemeType, overwrite: boolean) => void
Applies the given theme to the configured theme target. If no theme is given, the active theme is applied.
Parameters
theme?: Theme
type?: ThemeType
overwrite?: boolean
(theme: Theme, type: ThemeType, overwrite: boolean) => void
Parameters
theme?: Theme
type?: ThemeType
overwrite?: boolean
(type: ThemeType) => void
Apply light or dark theme to the configured theme target.
Parameters
type: ThemeType
(theme: Theme) => Theme
Parameters
theme: Theme
(theme: Theme) => void
Parameters
theme: Theme
(name: string, dark: boolean = false) => string
Parameters
name: string
dark: boolean = false
(css: string, selector: string, scheme: ThemeColorScheme) => string
Parameters
css: string
selector: string
scheme: ThemeColorScheme
(name: string) => Observable<boolean>
Deletes the theme with the given name from the theme store.
Parameters
name: string
dispatchThemeSwitchEvent: () => void
Loads and returns the currently active theme. Returns undefined if no custom theme is used.
Returns A custom theme or undefined if the default element theme is used.
getActiveTheme: () => Observable<(Theme | undefined)>
(name: string) => Observable<(Theme | undefined)>
Returns a clone of the theme with the given name or undefined if not available or name is element .
Returns The theme with the given name and undefined if name is element .
Parameters
The name of the theme to be returned.
name: string
(name: string) => boolean
Returns true if a theme with the given name is available.
Parameters
name: string
(theme: Theme) => boolean
Parameters
theme: Theme
(theme: Theme, type: ("light" | "dark")) => boolean
Parameters
theme: Theme
type: ("light" | "dark")
(data: unknown) => boolean
Checks if the given theme JSON object is a valid theme.
Parameters
data: unknown
(name: string) => void
Parameters
name: string
Resets the preview theme to the default element theme.
resetPreview: () => void
(name: string, type: ThemeType) => Observable<boolean>
Sets the active theme to the given name. If no name is given, the default element theme is used.
Parameters
name?: string
type?: ThemeType
(dark: boolean) => void
Parameters
dark: boolean
(name: string, value: string, type: keyof ThemeColorSchemes) => void
Updates the given property of the preview theme.
Parameters
name: string
value: string
type: keyof ThemeColorSchemes

Except where otherwise noted, content on this site is licensed under MIT License.