UseTheme: Manage theme state in Svelte

Discover the useTheme action in Lapikit

The useTheme function changes the theme of your application: it sets the data-kit-theme attribute on the <html> element and keeps the choice in localStorage. Every Lapikit component follows it.

Call useTheme with the name of the theme: useTheme('dark'), useTheme('light'), or useTheme('system') to follow the setting of the operating system (prefers-color-scheme).

<script lang="ts">
	import { useTheme } from 'lapikit/actions';
	import { Moon, Sun } from 'lucide-svelte';

	let mode = $state<'light' | 'dark'>('light');
</script>

<kit:btn
	icon
	onclick={() => {
		useTheme(mode === 'light' ? 'dark' : 'light');
		mode = mode === 'light' ? 'dark' : 'light';
	}}
	aria-label="Toggle theme"
	size="lg"
>
	{#if mode !== 'light'}
		<kit:icon>
			<Sun />
		</kit:icon>
	{:else}
		<kit:icon>
			<Moon />
		</kit:icon>
	{/if}
</kit:btn>

See the themes documentation to learn about all the available options for customizing Lapikit for your application.

API References

Choose where Lapikit stores the theme

Lapikit keeps the selected theme between page reloads and browser sessions, under the @lapikit/theme key of localStorage. To change the key, pass it once to createGlobalTheme:

<script>
	import { createGlobalTheme } from 'lapikit/actions';

	createGlobalTheme({ key: 'my-app/theme', name: 'system' });
</script>

name is the theme used when nothing is stored yet. A custom key is useful when:

• Managing multiple applications ;
• Isolating environments ;
• Testing different theme configurations ;
• Or integrating Lapikit into an existing storage architecture.

When localStorage is not available (private browsing, blocked storage), the theme still applies, without being kept.

Avoid the flash of the wrong theme

With SSR, the page is painted before Svelte runs: the default theme shows for a moment, then the stored one. themeScript() returns an inline script that applies the stored theme before the first paint. Add it to the <head> of your root layout, with the same options as createGlobalTheme:

<script>
	import { themeScript } from 'lapikit/actions';
</script>

<svelte:head>
	{@html themeScript({ key: 'my-app/theme', name: 'system' })}
</svelte:head>

Because the theme is centralized, all Lapikit components automatically stay synchronized with the active theme across your Svelte or SvelteKit application.