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

``bash
npm i @friendofsvelte/toggle
`

Usage

In your src/+layout.svelte (recommended) or +page.svelte file, add the following code:

`svelte



Is dark mode: {appearance.dark}
`

In your src/hooks.server.ts file, add the following code:

`ts
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

`

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:

`ts
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.

`svelte



{#if appearance.dark !== null}
class="dark-mode-button {className}"
class:isDarkMode={appearance.dark}
in:scale
onclick={()=>appearance.dark=!appearance.dark}>
{#if appearance.dark}

{:else}

{/if}

{:else}