Skip to main content
1

Install mode-watcher

Start by installing mode-watcher:
npm install mode-watcher
2

Add the ModeWatcher component

Import the ModeWatcher component and use it in your root layout:
src/routes/+layout.svelte
<script lang="ts">
  import "../app.css";
  import { ModeWatcher } from "mode-watcher";
  let { children } = $props();
</script>

<ModeWatcher />
{@render children?.()}
3

Add a mode toggle

Place a mode toggle on your site to toggle between light and dark mode.
The following examples show different approaches to creating a mode toggle. Choose the one that fits your needs.

​
Light Switch

A simple toggle switch for dark mode:
<script lang="ts">
  import { toggleMode } from "mode-watcher";
</script>

<button on:click={toggleMode}>
  Toggle Dark Mode
</button>

​
Dropdown Menu

A dropdown menu with multiple theme options:
<script lang="ts">
  import { setMode } from "mode-watcher";
</script>

<select on:change={(e) => setMode(e.target.value)}>
  <option value="light">Light</option>
  <option value="dark">Dark</option>
  <option value="system">System</option>
</select>

Build docs developers (and LLMs) love

Get started for freeTalk to us