Dark/Light mode in Svelte.
Ported from next-themes
$ npm install svelte-theme-switch
# or
$ yarn add svelte-theme-switch
+layout.svelte
file<sript>
import { ThemeWrapper } from "svelte-theme-switch";
</script>
<ThemeWrapper>
<slot/>
</ThemeWrapper>
<sript>
import { themeStore } from "svelte-theme-switch";
</script>
<p>Current theme is {$themeStore.theme}</p>
<button
on:click={() =>
$themeStore.setTheme($themeStore.theme === "light" ? "dark" : "light")}
>
Switch Theme
</button>
All your theme configuration is passed to ThemeProvider.
storageKey = 'theme'
: Key used to store theme setting in localStoragedefaultTheme = 'system'
: Default theme name (for v0.0.12 and lower the default was light
). If enableSystem
is false, the default theme is light
forcedTheme
: Forced theme name for the current page (does not modify saved theme settings)enableSystem = true
: Whether to switch between dark
and light
based on prefers-color-scheme
enableColorScheme = true
: Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttonsdisableTransitionOnChange = false
: Optionally disable all CSS transitions when switching themes (example)themes = ['light', 'dark']
: List of theme namesattribute = 'data-theme'
: HTML attribute modified based on the active themeclass
and data-*
(meaning any data attribute, data-mode
, data-color
, etc.) (example)value
: Optional mapping of theme name to attribute valueobject
where key is the theme name and value is the attribute value (example)nonce
: Optional nonce passed to the injected script
tag, used to allow-list the next-themes script in your CSPuseTheme takes no parameters, but returns:
theme
: Active theme namesetTheme(name)
: Function to update the themeforcedTheme
: Forced page theme or falsy. If forcedTheme
is set, you should disable any theme switching UIresolvedTheme
: If enableSystem
is true and the active theme is "system", this returns whether the system preference resolved to "dark" or "light". Otherwise, identical to theme
systemTheme
: If enableSystem
is true, represents the System theme preference ("dark" or "light"), regardless what the active theme isthemes
: The list of themes passed to ThemeProvider
(with "system" appended, if enableSystem
is true)