API

ThemeProvider

Registers themes, writes their stylesheet, remembers the user's choice and scopes a theme to its subtree.

Import

import { ThemeProvider, type ThemeProviderProps } from 'sveltier';

Props

Name	Type	Default	Description
`theme`	`'system' \| string`	`'system'`	The theme to show: a registered theme name, or "system" to follow prefers-color-scheme. Bindable. Nested providers inherit their parent’s choice when unset.
`themes`	`Record<string, ThemeDefinition>`	`–`	Required at the root, where it registers the themes, for example monolith or { ...monolith, ...maison }. There is no default, so an app ships only the packs it registers.
`light`	`string`	`first light theme`	Root only. Theme used by "system" when the OS prefers light, and by toggle().
`dark`	`string`	`first dark theme`	Root only. Theme used by "system" when the OS prefers dark, and by toggle().
`storageKey`	`string \| false`	`'sv-theme'`	Root only. localStorage key that remembers the choice and restores it before first paint. false turns persistence off.
`nonce`	`string`	`–`	Root only. CSP nonce added to the generated <style> and <script>.
`withBackground`	`boolean`	`false`	Nested only. Paints the scope with the theme’s background colour.
`ref`	`HTMLDivElement \| null`	`null`	Nested only. Bindable reference to the wrapper element.
`children`	`Snippet`	`–`	The themed content.
`...rest`	`HTMLAttributes<HTMLDivElement>`	`–`	Nested only. Spread on the wrapper element; class is merged.

Root and nested

The first ThemeProvider in the tree is the root. It renders no element, puts the theme stylesheet (and the restore script) in <head> and marks <html data-sv-theme>. Providers below it render a wrapper element with their own data-sv-theme and inherit the root's themes.

Root

<!-- src/routes/+layout.svelte -->
<script>
  import { UIProvider } from 'sveltier';
  import { monolith } from 'sveltier/themes/monolith';
  let { children } = $props();
</script>

<!-- Monolith, light or dark following the OS -->
<UIProvider themes={monolith}>
  {@render children()}
</UIProvider>

Nested

<UIProvider themes={monolith}>
  <p>The page follows the user's choice.</p>

  <ThemeProvider theme="monolith-dark" withBackground class="card">
    <p>This card is always dark.</p>
  </ThemeProvider>
</UIProvider>

Context

Every provider exposes itself to its descendants. Read it with useTheme().