Easier theme switching for Svelte
and SvelteKit
apps.
npm install svelte-os-themes
<!-- +layout.svelte -->
<script>
import { ThemeProvider } from 'svelte-os-themes';
let { children } = $props();
</script>
<ThemeProvider
fallback="system"
attribute="class"
storageKey="theme"
colorScheme={true}
system={true}
nonce=""
>
{@render children()}
</ThemeProvider>
<!-- +page.svelte -->
<script>
import { useTheme } from 'svelte-os-themes';
let theme = useTheme();
</script>
<button
type="button"
onclick={function () {
theme.value = 'light';
}}
data-selected={theme.value === 'light'}
>
Light
</button>
<button
type="button"
onclick={function () {
theme.value = 'dark';
}}
data-selected={theme.value === 'dark'}
>
Dark
</button>
<button
type="button"
onclick={function () {
theme.value = 'system';
}}
data-selected={theme.value === 'system'}
>
System
</button>
-
fallback
The default theme to use when no theme is set in storage.
accepted values:
'light'
,'dark'
,'system'
default value:'system'
-
attribute
The attribute to set on the
html
element.accepted values:
'class'
,'data-<string>'
default value:'class'
-
storageKey
The key to use when storing the theme in
localStorage
.accepted values:
<string>
default value:'theme'
-
system
Whether to change theme when os theme changes.
accepted values:
true
,false
default value:true
-
colorScheme
Whether to add/update the
html
'scolor-scheme
.accepted values:
true
,false
default value:true
-
nonce
The nonce to use for script.
accepted values:
<string>
default value:
useTheme
does not accept any arguments and returns an object with the following properties:
-
value
Returns the current theme when used as a getter and sets the theme when used as a setter.