Documentation Index
Fetch the complete documentation index at: https://mintlify.com/huntabyte/shadcn-svelte/llms.txt
Use this file to discover all available pages before exploring further.
Install mode-watcher
Start by installing 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>
<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>