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

In-app toggle

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.

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.