Svelte

Install mode-watcher

Start by installing mode-watcher:

npm install mode-watcher

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?.()}

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>

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>

Get Started

Components

Customization

CLI

Advanced

Resources

Light Switch

​Light Switch

​Dropdown Menu

Light Switch

Dropdown Menu