This library is a port of next-theme for SvelteKit. All credit goes to pacocoursey and all next-themes contributors

While usable, this library is still in its early phase, PR are welcome.

svelte-themes

An abstraction for themes in your SvelteKit.js app.

• ✅ Perfect dark mode in 2 lines of code
• ✅ System setting with prefers-color-scheme
• ✅ Themed browser UI with color-scheme
• ✅ No flash on load
• ✅ Sync theme across tabs and windows
• ✅ Disable flashing when changing themes
• ✅ Force pages to specific themes
• ✅ Class or data attribute selector
• ✅ Theme store

Check out the Live Example to try it for yourself.

Install

$ pnpm add svelte-themes
# or
$ npm install svelte-themes
# or
$ yarn add svelte-themes

Using svelte-themes

In order to use svelte-themes you will need to add SvelteTheme inside your __layout component.

// pages/__layout.svelte

<script>
    import SvelteTheme from 'svelte-themes/SvelteTheme.svelte';
</script>

<SvelteTheme />
<slot />

Props

• storageKey = 'theme': Key used to store theme setting in localStorage
• defaultTheme = 'system': Default theme name. 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 buttons
• disableTransitionOnChange = false: Optionally disable all CSS transitions when switching themes
• themes = ['light', 'dark']: List of theme names
• attribute = 'data-theme': HTML attribute modified based on the active theme
  • accepts class and data-* (meaning any data attribute, data-mode, data-color, etc.)
• 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

Reading and updating the theme

Svelte-themes exports

• a theme writable store as its default so you can access the theme props anywhere in you app
• setTheme function so you can easily switch the theme.

<script>
import themeStore, { setTheme } from 'svelte-themes';
<script/>

<select bind:value={$themeStore.theme}>
        <option value="dark">Dark</option>
        <option value="light">Light</option>
        <option value="system">System</option>
</select>

<button on:click={() => setTheme('dark')}> Dark mode </button>

Theme store

• theme: Active theme name
• forcedTheme: Forced page theme or falsy. If forcedTheme is set, you should disable any theme switching UI
• resolvedTheme: 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 is
• themes: The list of themes passed to ThemeProvider (with "system" appended, if enableSystem is true)

For the rest of the documentation please refer to the next-themes repo.