6.7k

Adding dark mode to your Svelte site.

Install mode-watcher

Start by installing mode-watcher:

pnpm i 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.