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.

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

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

That's it!

Use the toggleMode function and $mode to toggle:

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

<button onclick={toggleMode}>
	{#if mode.current === 'light'}
		Light
	{:else}
		Dark
	{/if}
</button>

Theming Structure Typography Integration

Share treats:

`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()}`

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