@theme-kit/react

Functions

ThemeInspector(__namedParameters): Element

Returns Element

ThemeModeButton(): Element

Returns Element

ThemeProvider<T extends ThemeDefinition<string>>(__namedParameters): Element

Returns Element

ThemeScope(__namedParameters): Element

Returns Element

ThemeScrollbar(props): null

ThemeScrollbar — overlay only.

Creates the custom scrollbar overlay.

Lifecycle: mount → create overlay → measure → attach listeners paint → add tk-scrollbar-ready destroy → remove overlay

Props are organized into three optional groups — behavior, appearance and icons — but every option is also accepted as a flat, top-level prop (flat props win over the grouped ones).

<ThemeScrollbar behavior={{ autoHide: true, smooth: true }} appearance={{ thickness: 8, radius: 999 }} icons={{ up: <ArrowUpIcon />, down: <ArrowDownIcon /> }} />

Returns null

useScopedTheme(ref, selection, transition?): RefObject<{ destroy: void; getTheme: void; setLocalThemes: void; setTransition: void; update: void } | null>

Returns RefObject<{ destroy: void; getTheme: void; setLocalThemes: void; setTransition: void; update: void } | null>

useSetThemeFamily(): __type(nextFamily: string): void

Returns __type(nextFamily: string): void

useSetThemeMode(): __type(nextMode: ThemeMode): void

Returns __type(nextMode: ThemeMode): void

useTheme<T extends ThemeDefinition<string>>(): { family: string; mode: ThemeMode; setFamily: __type(nextFamily: string): void; setMode: __type(nextMode: ThemeMode): void; theme: T; toggleTheme: __type(): void }

Returns { family: string; mode: ThemeMode; setFamily: __type(nextFamily: string): void; setMode: __type(nextMode: ThemeMode): void; theme: T; toggleTheme: __type(): void }

useThemeBatch(): __type(callback: __type(): void): void

Returns __type(callback: __type(): void): void

useThemeFamily(): string

Returns string

useThemeHistory(): { canRedo: boolean; canUndo: boolean; clear: __type(): void; redo: __type(): void; undo: __type(): void }

Returns { canRedo: boolean; canUndo: boolean; clear: __type(): void; redo: __type(): void; undo: __type(): void }

useThemeLifecycle(): { on: __type(event: keyof ThemeLifecycleEventMap<ThemeDefinition<string>>, listener: __type(data: unknown): void): __type(): void }

Returns { on: __type(event: keyof ThemeLifecycleEventMap<ThemeDefinition<string>>, listener: __type(data: unknown): void): __type(): void }

useThemeMode(): ThemeMode

Returns ThemeMode

useThemePacks(): __type(pack: ThemePack<any>): void

Returns __type(pack: ThemePack<any>): void

useThemeRestore(): __type(snapshot: ThemeRuntimeSnapshot): void

Returns __type(snapshot: ThemeRuntimeSnapshot): void

useThemeRuntime<T extends ThemeDefinition<string>>(): ThemeRuntime<T>

Returns ThemeRuntime<T>

useThemeSchedule(): ThemeSchedule | null

Reactive access to the runtime's sunrise/sunset scheduling controller.

Requires the runtime to be created with the scheduled option (see ThemeProvider / createThemeRuntime). Returns null when the provider has no schedule configured.

const schedule = useThemeSchedule();
schedule?.enable();
schedule?.disable();
// schedule.enabled, schedule.active, schedule.sunrise, schedule.sunset,
// schedule.nextTransition ... re-render reactively.

Returns ThemeSchedule | null

useThemeSnapshot(): __type(): ThemeRuntimeSnapshot

Returns __type(): ThemeRuntimeSnapshot

useThemeTimeTravel(): { history: HistoryEntry<ThemeDefinition<string>>[]; jump: __type(index: number): void }

Returns { history: HistoryEntry<ThemeDefinition<string>>[]; jump: __type(index: number): void }

useThemeTokens<T extends ThemeDefinition<string>>(): ThemeTokens | undefined

Returns ThemeTokens | undefined

useThemeValue<T extends ThemeDefinition<string>>(): T

Returns T

useToggleTheme(): __type(): void

Returns __type(): void

Interfaces

ThemeInspectorProps

ThemeProviderProps<T extends ThemeDefinition>

Extends ThemeRuntimeOptions<T>

ThemeScopeProps

ThemeScrollbarAppearance

Extends Pick<OverlayScrollbarOptions, "arrows" | "thickness" | "hoverThickness" | "radius" | "minThumbSize" | "offset" | "trackOpacity" | "thumbOpacity" | "zIndex" | "duration" | "animationDuration" | "thumbColor" | "trackColor" | "activeThumbColor" | "thumbHoverColor"> Appearance — the look/size of every strip.

ThemeScrollbarBehavior

Extends Pick<OverlayScrollbarOptions, "autoHide" | "hoverExpand" | "draggable" | "clickToJump" | "smooth" | "overscroll" | "axes" | "touch" | "dir"> Behavior — how the overlay scrolls and hides.

ThemeScrollbarIcons

Arrow button icons (any ReactNode — JSX, inline SVG, text, …).

ThemeScrollbarProps