A simple dark mode toggle for Svelte and SvelteKit app.
- In-app toggle between light and dark mode
- System toggle between light and dark mode
- Persist user preference in cookies
- Server-side rendering supported
- No dependencies
npm i @friendofsvelte/toggleIn your src/+layout.svelte (recommended) or +page.svelte file, add the following code:
<script>
import {ThemeToggle, appearance} from "@friendofsvelte/toggle";
import "@friendofsvelte/toggle/styles/Toggle.css";
</script>
<ThemeToggle/>
Is dark mode: {appearance.dark}In your src/hooks.server.ts file, add the following code:
import {sequence} from "@sveltejs/kit/hooks";
import {handleAppearance} from "@friendofsvelte/toggle";
export const handle = sequence(
handleAppearance
);Add class="%appearanceMode%" in your app.html file:
<html lang="en" class="%appearanceMode%">Done 🎉, you can now toggle between light and dark mode.
System toggle
In-app toggle
You can also use the toggle action to toggle the theme programmatically. Use
the follow utility function to achieve this:
import {
apperance
} from "@friendofsvelte/toggle";appearanceis a class object that storesdarkboolean state on it.- setting
appearance.dark = falsewith automatically update the UI to light mode. ThemeToggleis the default component that usesappearanceto toggle the theme.
<script lang="ts">
import {scale} from "svelte/transition";
import Moon from "$lib/toggle/icons/Moon.svelte";
import Sun from "$lib/toggle/icons/Sun.svelte";
import { appearance } from "@friendofsvelte/toggle";
import TrackAppearance from '@friendofsvelte/toggle';
let {class: className = ''} = $props();
</script>
<TrackAppearance/>
{#if appearance.dark !== null}
<button
class="dark-mode-button {className}"
class:isDarkMode={appearance.dark}
in:scale
onclick={()=>appearance.dark=!appearance.dark}>
{#if appearance.dark}
<Moon/>
{:else}
<Sun/>
{/if}
</button>
{:else}
<div class="dark-mode-button"/>
{/if}Now, add the following code in your tailwind app.css:
@variant dark (&:where(.dark, .dark *));this works for Tailwind V4 users.
Friend Of Svelte is a community driven project to help Svelte developers to find and develop awesome Svelte resources.
If you like this project, you can be one of the friend by contributing to the project. Memberships are open for everyone.