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/toggle

In your +layout.svelte 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
);

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";

• appearance is a class object that stores dark boolean state on it.
• setting appearance.dark = false with automatically update the UI to light mode.
• ThemeToggle is the default component that uses appearance to 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 "$lib/toggle/toggle.svelte";
    import TrackAppearance from "$lib/toggle/TrackAppearance.svelte";

    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}

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.