@friendofsvelte/toggle NPM

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 +layout.svelte or +page.svelte file, add the following code:

<script>
    import {ThemeToggle, isDarkMode} from "@friendofsvelte/toggle";
    import "@friendofsvelte/toggle/styles/Toggle.css";
</script>

<ThemeToggle/>
Is dark mode: {$isDarkMode}

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.

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 {
    isDarkMode, metaPerformDarkMode, toggleDarkMode, performDarkMode, initDarkMode
} from "@friendofsvelte/toggle";

isDarkMode is a boolean writable store that indicates if the appearance is dark or not.
metaPerformDarkMode that accepts a boolean value to set the appearance.
toggleDarkMode uses the isDarkMode store to toggle the appearance.
performDarkMode uses the metaPerformDarkMode and passes the value of isDarkMode to it.
initDarkMode is a function that initializes the isDarkMode store with the value of the prefers-color-scheme media query or the appearanceMode cookie, and initialize a listener.