@theme-kit/angular

Functions

buildThemeCSSMap(themes): ThemeCSSMap

Returns ThemeCSSMap

createAngularPersistence(): ThemeSelectionPersistenceAdapter

Returns ThemeSelectionPersistenceAdapter

createBlockingScriptContent(themes, savedSelection?): string

Returns string

injectBootstrapTheme<T extends ThemeDefinition<string>>(options): ThemeAdapter<T>

Angular injectable that registers the Bootstrap adapter on the active Theme Kit runtime. Maintains a tagged :root style element with concrete --bs-* variables (including -rgb triplets), kept in sync as the active theme changes.

Returns ThemeAdapter<T>

injectDaisyTheme<T extends ThemeDefinition<string>>(options): ThemeAdapter<T>

Angular injectable that registers the daisyUI adapter on the active Theme Kit runtime. Maintains a tagged :root style element with concrete --color-* variables, kept in sync as the active theme changes.

Returns ThemeAdapter<T>

injectOpenPropsTheme<T extends ThemeDefinition<string>>(options): ThemeAdapter<T>

Angular injectable that registers the Open Props adapter on the active Theme Kit runtime. Maintains a tagged :root style element with concrete --brand, --link, --size-* and related variables, kept in sync as the active theme changes.

Returns ThemeAdapter<T>

injectShadcnTheme<T extends ThemeDefinition<string>>(options): ThemeAdapter<T>

Angular injectable that registers the shadcn/ui adapter on the active Theme Kit runtime. Maintains a tagged :root style element with concrete --* variables, kept in sync as the active theme changes.

Call in your component (or root) constructor or field initializer:

import { injectShadcnTheme } from "@theme-kit/angular";

export class AppComponent {
  adapter = injectShadcnTheme();
}

Returns ThemeAdapter<T>

injectTheme<T extends ThemeDefinition<string>>(): Signal<ThemeState<T>>

Returns Signal<ThemeState<T>>

injectThemeBatch(): __type(callback: __type(): void): void

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

injectThemeHistory<T extends ThemeDefinition<string>>(): { clear: __type(): void; history: Signal<ThemeHistoryState>; redo: __type(): void; undo: __type(): void }

Returns { clear: __type(): void; history: Signal<ThemeHistoryState>; redo: __type(): void; undo: __type(): void }

injectThemeLifecycle(): { 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 }

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

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

injectThemeRestore(): __type(snapshot: ThemeRuntimeSnapshot): void

Returns __type(snapshot: ThemeRuntimeSnapshot): void

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

Returns ThemeRuntime<T>

injectThemeSchedule<T extends ThemeDefinition<string>>(): ThemeScheduleController | null

Reactive access to the runtime's sunrise/sunset scheduling controller. Returns null when the runtime was provided without the scheduled option.

const schedule = injectThemeSchedule();
schedule?.enable();
schedule?.disable();
schedule?.state().nextTransition;

Returns ThemeScheduleController | null

injectThemeSnapshot(): __type(): ThemeRuntimeSnapshot<ThemeDefinition<string>>

Returns __type(): ThemeRuntimeSnapshot<ThemeDefinition<string>>

injectThemeTimeTravel<T extends ThemeDefinition<string>>(): { history: Signal<readonly HistoryEntry<T>[]>; jump: __type(index: number): void }

Returns { history: Signal<readonly HistoryEntry<T>[]>; jump: __type(index: number): void }

provideThemeKit(options): EnvironmentProviders

Returns EnvironmentProviders

provideThemeKitRuntime(runtime): EnvironmentProviders

Returns EnvironmentProviders

Classes

class ThemeInspectorComponent

class ThemeScopeDirective

class ThemeScrollbarDirective

Phase 2 — ThemeScrollbarDirective: overlay only.

Creates the custom scrollbar overlay. Does NOT hide the native scrollbar — that's the bootstrap script's job (Phase 1, tk-scrollbar).

<div themeKitScrollbar [themeKitScrollbarOptions]="{ thickness: 8 }"></div>

Interfaces

InjectAdapterOptions

ThemeCSSMap

ThemeHistoryState

ThemeScheduleController

ThemeState<T extends ThemeDefinition>

Type Aliases

ThemeKitProviderOptions

ThemeRuntimeOptions<ThemeDefinition> & { target?: HTMLElement }

Variables

THEME_KIT_RUNTIME

InjectionToken<ThemeRuntime<ThemeDefinition<string>>>

THEME_KIT_SCOPED_RUNTIME

InjectionToken<ThemeRuntime<ThemeDefinition<string>>>