@theme-kit/astro

Functions

buildThemeCssMap(themes): Record<string, Record<string, string>>

Returns Record<string, Record<string, string>>

computeFingerprint(themes, defaultTheme?): string

Returns string

createAstroThemePersistence(themes?, defaultTheme?): ThemeSelectionPersistenceAdapter | null

Returns ThemeSelectionPersistenceAdapter | null

createBlockingScript(fingerprint, themeCssMap): string

Returns string

darkModeCSSTemplate(variables): string

Returns string

getGlobalRuntime<T extends ThemeDefinition<string>>(): ThemeRuntime<T> | null

Returns ThemeRuntime<T> | null

setGlobalRuntime(runtime): void

Returns void

ThemeInspector(__namedParameters?): Element

Returns Element

ThemeProviderClient<T extends ThemeDefinition<string>>(__namedParameters): null

Returns null

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

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; history: HistoryEntry<ThemeDefinition<string>>[]; jump: __type(index: number): void; redo: __type(): void; undo: __type(): void }

Returns { canRedo: boolean; canUndo: boolean; clear: __type(): void; history: HistoryEntry<ThemeDefinition<string>>[]; jump: __type(index: number): 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 sunrise/sunset schedule controller. Returns null when the runtime was created without the scheduled option.

const schedule = useThemeSchedule();
schedule?.enable();
schedule?.disable();
schedule?.set({ timeZone: "Asia/Kathmandu" });

Returns ThemeSchedule | null

useThemeSnapshot(): __type(): ThemeRuntimeSnapshot

Returns __type(): ThemeRuntimeSnapshot

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

ThemeProviderClientProps<T extends ThemeDefinition>

ThemeScopeProps

ThemeScrollbarProps