Svelte Dark Mode Toggle

A simple dark mode toggle for Svelte and SvelteKit app.

Features

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

Installation

npm i @friendofsvelte/toggle

Usage

In 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.

Previews

System toggle system_mode

In-app toggle in_app_mode

Custom action

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}

About Friend Of Svelte

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.

Package Rankings

Top 44.01% on Npmjs.org

Related Projects

artist-svelte

An opinionated and clean UI framework for SvelteKit

22 Sep 2021 4

svelte-switch

Svelte component for toggle/switch a button

19 Jul 2020 27

svelte-themer

A theming engine for your Svelte apps using CSS Variables, persisted.

01 Mar 2020 140

svelte-object-explorer

A Svelte component to view objects similar to the console to easily see your state or stores

22 Oct 2019 3