Docs

Dark Mode

Adding dark mode to your site using mode-watcher.

Usage

1. Install mode-watcher

npm install mode-watcher

See Mode Watcher for details.

2. Add ModeWatcher component

Add the <ModeWatcher /> component to your root +layout.svelte file.

import { ModeWatcher } from "mode-watcher";
let { children } = $props();
<ModeWatcher defaultMode="system" />
{@render children()}

3. That's it!

Use the toggleMode function and $mode to toggle:

import Button from '$lib/components/ui/button.svelte';
import { toggleMode, mode } from 'mode-watcher';
<Button size="icon" onclick={toggleMode}>
	{#if $mode === 'light'}
		...
	{:else}
		...
	{/if}
</Button>

Preview