svelte-os-themes
v0.0.15
Published
Easier theme switching for `Svelte` and `SvelteKit` apps.
Downloads
684
Maintainers
Readme
Svelte OS Themes
Easier theme switching for Svelte
and SvelteKit
apps.
Installation
npm install svelte-os-themes
Usage
<!-- +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>
API
ThemeProvider
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
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.