@theme-kit/remix

Functions

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

<AntdThemeProvider runtime={runtime}> — wraps Ant Design's own ConfigProvider with a theme derived from Theme Kit's semantic tokens.

Returns Element

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

<ChakraThemeProvider runtime={runtime}> — wraps Chakra's own ChakraProvider with a system derived from Theme Kit's semantic tokens.

Returns Element

createRemixThemePersistence(themes?, defaultTheme?, options): ThemeSelectionPersistenceAdapter | null

Returns ThemeSelectionPersistenceAdapter | null

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

<MantineThemeProvider runtime={runtime}> — wraps Mantine's own MantineProvider with a theme derived from Theme Kit's semantic tokens. The Mantine color scheme is forced to match the active Theme Kit mode so Mantine's built-in dark styles stay in sync.

Returns Element

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

<MuiThemeProvider runtime={runtime}> — wraps MUI's own ThemeProvider with a theme derived from Theme Kit's semantic tokens.

Returns Element

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

Returns Element

ThemeInspector(__namedParameters?): 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

useAntdTheme<T extends ThemeDefinition<string>>(runtime): ThemeConfig

Subscribes to a Theme Kit runtime and returns an Ant Design theme config that is rebuilt automatically whenever the active theme changes.

Returns ThemeConfig

useBootstrapTheme(options?): void

React hook that installs the Bootstrap adapter onto the active Theme Kit runtime. The adapter maintains a tagged :root style element containing concrete --bs-* variables (including -rgb triplets) and keeps them in sync as the theme changes.

Call once in your app root:

1import { useBootstrapTheme } from "@theme-kit/bootstrap";
2
3function App() {
4  useBootstrapTheme();
5  return <YourApp />;
6}

Returns void

useChakraTheme<T extends ThemeDefinition<string>>(runtime): SystemContext

Subscribes to a Theme Kit runtime and returns a Chakra UI system that is rebuilt automatically whenever the active theme changes.

Returns SystemContext

useDaisyTheme(options?): void

React hook that installs the daisyUI adapter onto the active Theme Kit runtime. The adapter maintains a tagged :root style element containing concrete --color-* variables in sync as the theme changes.

Call once in your app root:

1import { useDaisyTheme } from "@theme-kit/daisyui";
2
3function App() {
4  useDaisyTheme();
5  return <YourApp />;
6}

Returns void

useMantineTheme<T extends ThemeDefinition<string>>(runtime): { activeClassName?: string; autoContrast?: boolean; black?: string; breakpoints?: { lg?: string; md?: string; sm?: string; xl?: string; xs?: string } { [x: string & object]: string | undefined }; colors?: { blue?: MantineColorsTuple; cyan?: MantineColorsTuple; dark?: MantineColorsTuple; grape?: MantineColorsTuple; gray?: MantineColorsTuple; green?: MantineColorsTuple; indigo?: MantineColorsTuple; lime?: MantineColorsTuple; orange?: MantineColorsTuple; pink?: MantineColorsTuple; red?: MantineColorsTuple; teal?: MantineColorsTuple; violet?: MantineColorsTuple; yellow?: MantineColorsTuple } { [x: string & object]: MantineColorsTuple | undefined }; components?: { [x: string]: { classNames?: any; defaultProps?: any; styles?: any; vars?: any } | undefined }; cursorType?: "default" | "pointer"; defaultGradient?: { deg?: number; from?: string; to?: string }; defaultRadius?: MantineRadius; focusClassName?: string; focusRing?: "auto" | "always" | "never"; fontFamily?: string; fontFamilyMonospace?: string; fontSizes?: { lg?: string; md?: string; sm?: string; xl?: string; xs?: string } { [x: string & object]: string | undefined }; fontSmoothing?: boolean; headings?: { fontFamily?: string; fontWeight?: string; sizes?: { h1?: { fontSize?: string; fontWeight?: string; lineHeight?: string }; h2?: { fontSize?: string; fontWeight?: string; lineHeight?: string }; h3?: { fontSize?: string; fontWeight?: string; lineHeight?: string }; h4?: { fontSize?: string; fontWeight?: string; lineHeight?: string }; h5?: { fontSize?: string; fontWeight?: string; lineHeight?: string }; h6?: { fontSize?: string; fontWeight?: string; lineHeight?: string } }; textWrap?: "wrap" | "nowrap" | "balance" | "pretty" | "stable" }; lineHeights?: { lg?: string; md?: string; sm?: string; xl?: string; xs?: string } { [x: string & object]: string | undefined }; luminanceThreshold?: number; other?: { [x: string]: any }; primaryColor?: string; primaryShade?: MantineColorShade | { dark?: MantineColorShade | undefined; light?: MantineColorShade | undefined }; radius?: { lg?: string; md?: string; sm?: string; xl?: string; xs?: string } { [x: string & object]: string | undefined }; respectReducedMotion?: boolean; scale?: number; shadows?: { lg?: string; md?: string; sm?: string; xl?: string; xs?: string } { [x: string & object]: string | undefined }; spacing?: { lg?: string; md?: string; sm?: string; xl?: string; xs?: string } { [x: number]: string | undefined } { [x: string & object]: string | undefined }; variantColorResolver?: VariantColorsResolver; white?: string }

Subscribes to a Theme Kit runtime and returns a Mantine theme that is rebuilt automatically whenever the active theme changes.

Returns { activeClassName?: string; autoContrast?: boolean; black?: string; breakpoints?: { lg?: string; md?: string; sm?: string; xl?: string; xs?: string } { [x: string & object]: string | undefined }; colors?: { blue?: MantineColorsTuple; cyan?: MantineColorsTuple; dark?: MantineColorsTuple; grape?: MantineColorsTuple; gray?: MantineColorsTuple; green?: MantineColorsTuple; indigo?: MantineColorsTuple; lime?: MantineColorsTuple; orange?: MantineColorsTuple; pink?: MantineColorsTuple; red?: MantineColorsTuple; teal?: MantineColorsTuple; violet?: MantineColorsTuple; yellow?: MantineColorsTuple } { [x: string & object]: MantineColorsTuple | undefined }; components?: { [x: string]: { classNames?: any; defaultProps?: any; styles?: any; vars?: any } | undefined }; cursorType?: "default" | "pointer"; defaultGradient?: { deg?: number; from?: string; to?: string }; defaultRadius?: MantineRadius; focusClassName?: string; focusRing?: "auto" | "always" | "never"; fontFamily?: string; fontFamilyMonospace?: string; fontSizes?: { lg?: string; md?: string; sm?: string; xl?: string; xs?: string } { [x: string & object]: string | undefined }; fontSmoothing?: boolean; headings?: { fontFamily?: string; fontWeight?: string; sizes?: { h1?: { fontSize?: string; fontWeight?: string; lineHeight?: string }; h2?: { fontSize?: string; fontWeight?: string; lineHeight?: string }; h3?: { fontSize?: string; fontWeight?: string; lineHeight?: string }; h4?: { fontSize?: string; fontWeight?: string; lineHeight?: string }; h5?: { fontSize?: string; fontWeight?: string; lineHeight?: string }; h6?: { fontSize?: string; fontWeight?: string; lineHeight?: string } }; textWrap?: "wrap" | "nowrap" | "balance" | "pretty" | "stable" }; lineHeights?: { lg?: string; md?: string; sm?: string; xl?: string; xs?: string } { [x: string & object]: string | undefined }; luminanceThreshold?: number; other?: { [x: string]: any }; primaryColor?: string; primaryShade?: MantineColorShade | { dark?: MantineColorShade | undefined; light?: MantineColorShade | undefined }; radius?: { lg?: string; md?: string; sm?: string; xl?: string; xs?: string } { [x: string & object]: string | undefined }; respectReducedMotion?: boolean; scale?: number; shadows?: { lg?: string; md?: string; sm?: string; xl?: string; xs?: string } { [x: string & object]: string | undefined }; spacing?: { lg?: string; md?: string; sm?: string; xl?: string; xs?: string } { [x: number]: string | undefined } { [x: string & object]: string | undefined }; variantColorResolver?: VariantColorsResolver; white?: string }

useMuiTheme<T extends ThemeDefinition<string>>(runtime): Theme

Subscribes to a Theme Kit runtime and returns a Material UI theme that is rebuilt automatically whenever the active theme changes.

Returns Theme

useOpenPropsTheme(options?): void

React hook that installs the Open Props adapter onto the active Theme Kit runtime. The adapter maintains a tagged :root style element containing concrete --color-* / --brand / --size-* / --shadow-* variables in sync as the theme changes.

Call once in your app root:

1import { useOpenPropsTheme } from "@theme-kit/open-props";
2
3function App() {
4  useOpenPropsTheme();
5  return <YourApp />;
6}

Returns void

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

Returns __type(nextFamily: string): void

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

Returns __type(nextMode: ThemeMode): void

useShadcnTheme(options?): void

React hook that installs the shadcn adapter onto the active Theme Kit runtime. The adapter maintains a tagged :root style element containing concrete --* variables in sync as the theme changes.

Call once in your app root:

1import { useShadcnTheme } from "@theme-kit/shadcn";
2
3function App() {
4  useShadcnTheme();
5  return <YourApp />;
6}

Returns 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

AntdThemeProviderProps<T extends ThemeDefinition>

ChakraThemeProviderProps<T extends ThemeDefinition>

MantineThemeProviderProps<T extends ThemeDefinition>

MuiThemeProviderProps<T extends ThemeDefinition>

RemixThemePersistenceOptions

ThemeHeadProps<T extends ThemeDefinition>

ThemeInspectorProps

ThemeProviderProps<T extends ThemeDefinition>

ThemeScrollbarProps