Setup

Dark Mode Implementation

Adding dark mode to your site using mode-watcher.

Usage

Install mode-watcher

npm install mode-watcher

See Mode Watcher for details.

Add ModeWatcher component

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

1
<script lang="ts">
2
	import "../app.css";
3
	import { ModeWatcher } from "mode-watcher";
4
	let { children } = $props();
5
</script>
6

7
<ModeWatcher defaultMode="system" />
8
{@render children()}

That's it!

Use the toggleMode function and $mode to toggle:

1
<script lang="ts">
2
	import { toggleMode, mode } from 'mode-watcher';
3
</script>
4

5
<button onclick={toggleMode}>
6
	{#if mode.current === 'light'}
7
		Light
8
	{:else}
9
		Dark
10
	{/if}
11
</button>

Share treats:

Copyright © 2025 - Cliemtor Fabros