Customizable Svelte components for theme selection (light mode / dark mode) inspired by TailwindCSS. Flicker-free, synchronizes across tabs, works with or without SSR and doesn't require unnecessary use of transformPageChunk so is cache-friendly.
The TailwindCSS site is a great example of excellent UX and the theme select option is particularly nice. A simple icon gives access to a menu to set the theme to light mode or dark mode, or allow the system to automatically switch based on your device configuration (which can change based on the time of day).
A particularly nice touch is that it shows if the default system mode has been overridden using a different icon color.
For mobile users, where the navigation bar shrinks to become an expandable menu, they have a larger-hit-target version providing the same features.
This project re-creates these UI widgets and provides the system to persist and apply the selected theme in your SvelteKit project. Please refer to TailwindCSS Dark Mode documentation for how to use dark mode styles within your app.
Install using your package manager of choice:
pnpm i svelte-theme-select
Include the <Theme> component which writes the JS into the page header to apply the theme before hydration (this avoids a flash of the wrong styles). The <ThemeToggle> component provides the desktop icon and popup menu, the <ThemeSelect> component provides the mobile friendly equivalent. This is a cut-down layout, checkout the ready made templates available from TailwindUI.
<script lang="ts">
import { Theme, ThemeToggle, ThemeSelect } from 'svelte-theme-select'
import '../app.css'
</script>
<Theme />
<nav>
<!-- desktop navigation -->
<div class="hidden md:block">
<!-- logo and rest of options -->
<ThemeToggle />
</div>
<!-- mobile navigation -->
<div class="block md:hidden">
<!-- logo and rest of options -->
<ThemeSelect />
</div>
</nav>
{@render children?.()}Configure TailwindCSS to toggle dark mode manually using a class:
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));Set the light and dark mode backgrounds to use in your src/app.html app shell:
<body class="bg-slate-100 dark:bg-slate-900">
<div>%sveltekit.body%</div>
</body>Everything should then be in place to design using the TailWindCSS classes including the dark: prefix for when dark mode is active.
The UI widgets can be customized to match whatever TailwindCSS colors scheme you are using, the default icons can be replaced if desired, and the "Light", "Dark", and "System" labels replaced.
Coming soon
Coming soon
Coming soon