API

themeCss and themeScript

The low-level functions behind ThemeProvider: the theme stylesheet and the render-blocking restore script.

When to use them

ThemeProvider calls both for you. Use them directly to precompute the stylesheet, to serve it from your own server template, or to hash the script for a Content Security Policy.

API

Name	Type	Description
`themeCss(options)`	`(options: ThemeCssOptions) => string`	The stylesheet ThemeProvider writes: one rule per theme keyed by data-sv-theme and "system" as prefers-color-scheme media rules, in @layer sv.tokens; plus a .sv-color-<name> class for every colour with an on- colour, in @layer sv.base. Throws on unsafe names or values.
`options.themes`	`Record<string, ThemeDefinition>`	The themes to emit.
`options.light / dark`	`string`	The pair used by "system".
`options.fallback`	`'system' \| string`	What a bare <html> (no data-sv-theme yet) shows.
`themeScript(key, choices)`	`(storageKey: string, choices: string[]) => string`	The render-blocking restore script. Exposed so a Content Security Policy can allow it by hash.

Content Security Policy

CSP

<UIProvider themes={monolith} nonce={data.cspNonce}>…</UIProvider>

// or allow the restore script by hash
import { themeScript, monolith } from 'sveltier';
const script = themeScript('sv-theme', ['system', ...Object.keys(monolith)]);
// sha256 of `script` goes into script-src

See Server-side rendering for how the pieces fit together.