Dark mode - shadcn-svelte

Docs

Dark mode

Adding dark mode to your 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:

src/routes/+layout.svelte

	<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

	<script lang="ts">
  import { Button } from "@/registry/default/ui/button";
  import { Sun, Moon } from "radix-icons-svelte";

  import { toggleMode } from "mode-watcher";
</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 { Button } from "$lib/components/ui/button";
  import { Sun, Moon } from "lucide-svelte";

  import { toggleMode } from "mode-watcher";
</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

	<script lang="ts">
  import { Button } from "@/registry/default/ui/button";
  import * as DropdownMenu from "@/registry/default/ui/dropdown-menu";
  import { Sun, Moon } from "radix-icons-svelte";

  import { setMode, resetMode } from "mode-watcher";
</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 { Button } from "$lib/components/ui/button";
  import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
  import { Sun, Moon } from "lucide-svelte";

  import { setMode, resetMode } from "mode-watcher";
</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>

Theming CLI

On This Page