ThemeRoot.svelte

ThemeRoot adds global color scheme and theme support to the page. It also sets in the Svelte context a reactive theme_state containing the theme and color scheme.

view source

Declarations
#

ThemeRoot
#

ThemeRoot.svelte view source

accepts children

import ThemeRoot from '@fuzdev/fuz_ui/ThemeRoot.svelte';

sync_color_scheme?

type (color_scheme: ColorScheme | null) => void
optional default default_sync_color_scheme

load_color_scheme?

type (fallback?: ColorScheme, key?: string) => ColorScheme
optional default default_load_color_scheme

save_color_scheme?

type (color_scheme: ColorScheme | null, key?: string) => void
optional default default_save_color_scheme

load_theme?

type (fallback?: Theme, key?: string) => Theme
optional default default_load_theme

save_theme?

type (theme: Theme | null, key?: string) => void
optional default default_save_theme

theme_fallback?

type Theme
optional

theme_state?

A reactive class containing the selected theme and color scheme. Defaults to the first default theme.

type ThemeState
optional default new ThemeState({ theme: load_theme(theme_fallback), color_scheme: load_color_scheme(), })

children

type Snippet<[theme_state: ThemeState, style: string | null, theme_style_html: string | null]>
snippet parameters
theme_state ThemeState
style string | null
theme_style_html string | null

Depends on
#