Docs
Dark mode
Dark mode
Adding dark mode to your Svelte site.
We use the class strategy from Tailwind CSS to support dark mode toggling. See the Tailwind CSS documentation for more information.
How you add the dark class to the html element is up to you. In this guide, we will take a look at enabling dark mode toggling with mode-watcher.
Usage
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:
<script lang="ts">
import { ModeWatcher } from "mode-watcher";
</script>
<ModeWatcher />
<slot />
Add a mode toggle
Place a mode toggle on your site to toggle between light and dark mode.
Light switch
Loading...
<script lang="ts">
import Sun from "svelte-radix/Sun.svelte";
import Moon from "svelte-radix/Moon.svelte";
import { toggleMode } from "mode-watcher";
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button on:click={toggleMode} variant="outline" size="icon">
<Sun
class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
/>
<Moon
class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
/>
<span class="sr-only">Toggle theme</span>
</Button>
<script lang="ts">
import Sun from "lucide-svelte/icons/sun";
import Moon from "lucide-svelte/icons/moon";
import { toggleMode } from "mode-watcher";
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button on:click={toggleMode} variant="outline" size="icon">
<Sun
class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
/>
<Moon
class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
/>
<span class="sr-only">Toggle theme</span>
</Button>
Dropdown menu
Loading...
<script lang="ts">
import Sun from "svelte-radix/Sun.svelte";
import Moon from "svelte-radix/Moon.svelte";
import { resetMode, setMode } from "mode-watcher";
import { Button } from "$lib/components/ui/button/index.js";
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
</script>
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button builders={[builder]} variant="outline" size="icon">
<Sun
class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
/>
<Moon
class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
/>
<span class="sr-only">Toggle theme</span>
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content align="end">
<DropdownMenu.Item on:click={() => setMode("light")}
>Light</DropdownMenu.Item
>
<DropdownMenu.Item on:click={() => setMode("dark")}>Dark</DropdownMenu.Item>
<DropdownMenu.Item on:click={() => resetMode()}>System</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
<script lang="ts">
import Sun from "lucide-svelte/icons/sun";
import Moon from "lucide-svelte/icons/moon";
import { resetMode, setMode } from "mode-watcher";
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
import { Button } from "$lib/components/ui/button/index.js";
</script>
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button builders={[builder]} variant="outline" size="icon">
<Sun
class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
/>
<Moon
class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
/>
<span class="sr-only">Toggle theme</span>
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content align="end">
<DropdownMenu.Item on:click={() => setMode("light")}
>Light</DropdownMenu.Item
>
<DropdownMenu.Item on:click={() => setMode("dark")}>Dark</DropdownMenu.Item>
<DropdownMenu.Item on:click={() => resetMode()}>System</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>