Dark/Light mode in Svelte.
Ported from next-themes
$ npm install svelte-theme-switch
# or
$ yarn add svelte-theme-switch
<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 localStorage -
defaultTheme = 'system'
: Default theme name (for v0.0.12 and lower the default waslight
). IfenableSystem
is false, the default theme islight
-
forcedTheme
: Forced theme name for the current page (does not modify saved theme settings) -
enableSystem = true
: Whether to switch betweendark
andlight
based onprefers-color-scheme
-
enableColorScheme = true
: Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons -
disableTransitionOnChange = false
: Optionally disable all CSS transitions when switching themes (example) -
themes = ['light', 'dark']
: List of theme names -
attribute = 'data-theme'
: HTML attribute modified based on the active theme- accepts
class
anddata-*
(meaning any data attribute,data-mode
,data-color
, etc.) (example)
- accepts
-
value
: Optional mapping of theme name to attribute value- value is an
object
where key is the theme name and value is the attribute value (example)
- value is an
-
nonce
: Optional nonce passed to the injectedscript
tag, used to allow-list the next-themes script in your CSP
useTheme takes no parameters, but returns:
-
theme
: Active theme name -
setTheme(name)
: Function to update the theme -
forcedTheme
: Forced page theme or falsy. IfforcedTheme
is set, you should disable any theme switching UI -
resolvedTheme
: IfenableSystem
is true and the active theme is "system", this returns whether the system preference resolved to "dark" or "light". Otherwise, identical totheme
-
systemTheme
: IfenableSystem
is true, represents the System theme preference ("dark" or "light"), regardless what the active theme is -
themes
: The list of themes passed toThemeProvider
(with "system" appended, ifenableSystem
is true)