Svelte 5

@theme-kit/svelte

ContextStoresRunes

Context-based provider with reactive readable stores for Svelte 5 runes-era components.

Installation

Install the package for your framework alongside @theme-kit/core.

bash

pnpm add @theme-kit/svelte

Quick Start

Start from scratch — install the package, then wrap your app in the provider at the entry point shown below.

+layout.svelte

svelte

1<script>
2  import { ThemeProvider } from "@theme-kit/svelte";
3  import { themes } from "./themes";
4</script>
5
6<ThemeProvider themes={themes} defaultTheme="mint-light">
7  <slot />
8</ThemeProvider>

Every integration re-exports the full @theme-kit/core surface, so history, batching, snapshots, packs and lifecycle work the same way across frameworks.

Implementation

Read and update theme state from any component using the framework-native primitives below.

ThemeSwitcher.svelte

svelte

1<script>
2  import { useTheme } from "@theme-kit/svelte";
3  const { theme, mode, toggleTheme } = useTheme();
4</script>
5
6<button onclick={toggleTheme}>
7  {$theme.name} · {$mode}
8</button>

What's Available

@theme-kit/svelte ships 15 exports in 5 categories. Everything below is also documented in the full API reference. Click any export to reveal what it does and how to use it.

Provider

—

Stores

—

Library adapters

—

Transition

—

Components

—

Use Cases

The important features in practice — copy any of these straight into your app.

Toggle light / dark

useTheme returns readable stores — prefix with $ in Svelte.

Toggle light / dark

svelte

1<script>
2  import { useTheme } from "@theme-kit/svelte";
3  const { theme, mode, setMode, toggleTheme } = useTheme();
4</script>
5
6<button onclick={toggleTheme}>{$theme.name} · {$mode}</button>
7<button onclick={() => setMode("dark")}>Dark</button>

Undo / redo theme changes

History stores are reactive, just like the theme state.

Undo / redo theme changes

svelte

1<script>
2  import { useThemeHistory, useThemeRuntime } from "@theme-kit/svelte";
3  const { undo, redo, canUndo, canRedo } = useThemeHistory();
4  const runtime = useThemeRuntime();
5</script>
6
7<button onclick={undo} disabled={!$canUndo}>Undo</button>
8<button onclick={redo} disabled={!$canRedo}>Redo</button>
9<button onclick={() => runtime.update({ colors: { primary: "#6366f1" } })}>
10  Make primary indigo
11</button>

Scope a subtree

ThemeScope themes a slot subtree in isolation.

Scope a subtree

svelte

<ThemeScope theme="forest">
  <DataViz />
</ThemeScope>

Lifecycle events

Watch every theme change and install packs at runtime.

Lifecycle events

svelte

1<script>
2  import { onMount } from "svelte";
3  import { useThemeLifecycle, useThemePacks } from "@theme-kit/svelte";
4  const { on } = useThemeLifecycle();
5  const usePack = useThemePacks();
6  onMount(() => on("beforeThemeChange", (e) => console.log(e.next.name)));
7</script>
8
9<button onclick={() => usePack({ name: "a11y", themes: highContrast })}>
10  Apply High Contrast pack
11</button>

Smooth theme transitions

Enable CSS transitions on theme changes for a polished user experience.

Smooth theme transitions

svelte

1<script>
2  import { ThemeProvider } from "@theme-kit/svelte";
3</script>
4
5<ThemeProvider
6  themes={themes}
7  transition={{ enabled: true, duration: 300, easing: "ease-in-out" }}
8>
9  <slot />
10</ThemeProvider>

More Examples

Scoped theming, history controls, and framework-specific patterns.

history + scope

svelte

1<script>
2  import { useThemeHistory, ThemeScope, type ThemeTransitionOptions } from "@theme-kit/svelte";
3  const { undo, redo, canUndo, canRedo } = useThemeHistory();
4
5  const transition: ThemeTransitionOptions = { duration: 300, easing: "ease" };
6</script>
7
8<button onclick={undo} disabled={!$canUndo}>Undo</button>
9<button onclick={redo} disabled={!$canRedo}>Redo</button>
10
11<ThemeScope theme="forest" {transition}>
12  <p>Scoped to forest</p>
13</ThemeScope>

API Reference

Provider

Export	Description
`ThemeProvider`	Context-based provider that wires DOM + CSS variable bindings.
`getThemeRuntime() / setThemeRuntime()`	Context helpers for retrieving or overriding the runtime.

Stores

Export	Description
`useTheme()`	Reactive readable stores for `theme`, `mode`, `family` and their setters.
`useThemeHistory()`	Undo / redo / jump through theme history.
`useThemeBatch()`	Atomic, coalesced updates.
`useThemeSnapshot() / useThemeRestore()`	Serialize and restore runtime state.
`useThemeLifecycle()`	Subscribe to lifecycle events.
`useThemePacks()`	Install theme packs at runtime.
`useThemeSchedule() / getThemeSchedule()`	Reactive readable store of the schedule state (`enabled`, `status`, `sunrise`, `sunset`, `nextTransition`) plus the imperative `ThemeSchedule` controller. Configure via the `scheduled` prop on ThemeProvider.

Library adapters

Export	Description
`useShadcnTheme() / useBootstrapTheme()`	Framework composables install the React-free CSS-variable adapter factories and dispose the returned adapter handle with the component lifecycle.
`useDaisyTheme() / useOpenPropsTheme()`	Same adapter contract for DaisyUI and Open Props; the framework package supplies lifecycle wiring while the adapter factory stays framework-neutral.
`adapter factory subpaths`	Use `@theme-kit/shadcn/factory`, `@theme-kit/bootstrap/factory`, `@theme-kit/daisyui/factory`, or `@theme-kit/open-props/factory` when you need the adapter without React.

Transition

Export	Description
`transition prop`	Pass `transition` to ThemeProvider to enable CSS transitions on theme changes.
`runtime.store.set(theme, { suppressTransition: true })`	Runtime toggle — no mutation hook exists. The transition prop is fixed at runtime creation; for a one-off instant switch, get the runtime (useThemeRuntime() / getThemeRuntime()) then runtime.store.set(theme, { suppressTransition: true }) applies immediately without animating. For full control, compose createThemeDiff + createTransitionPlan + runThemeAnimation from @theme-kit/core.

Components

Export	Description
`ThemeScope`	Scoped theming component for subtrees.