@friendofsvelte/toggle
Advanced tools
A simple dark mode toggle for Svelte and SvelteKit app.
npm i @friendofsvelte/toggle
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.
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.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 "@friendofsvelte/toggle";
import TrackAppearance from '@friendofsvelte/toggle';
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}
Now, add the following code in your tailwind app.css:
@variant dark (&:where(.dark, .dark *));
this works for Tailwind V4 users.
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.
FAQs
A simple dark mode toggle for Svelte and SvelteKit app.
We found that @friendofsvelte/toggle demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Five malicious NuGet packages impersonate Chinese .NET libraries to deploy a stealer targeting browser credentials, crypto wallets, SSH keys, and local files.
Security News
pnpm 11 turns on a 1-day Minimum Release Age and blocks exotic subdeps by default, adding safeguards against fast-moving supply chain attacks.
Security News
The remediated findings include organization permission bugs, stale project access after transfers, OIDC replay edge cases, audit logging gaps, and an IDOR in API token deletion.
