Support dark mode in your Svelte apps.

This component sets the theme based on the user’s preferred color scheme using window.matchMedia.

The preferred theme is persisted using the window.localStorage API.

# Yarn
yarn add -D svelte-dark-mode

# npm
npm i -D svelte-dark-mode

# pnpm
pnpm i -D svelte-dark-mode

The theme is set to either "dark" or "light" based on the user’s system preference.

<script>
  import DarkMode from "svelte-dark-mode";

  let theme;

  $: switchTheme = theme === "dark" ? "light" : "dark";
  $: document.body.className = theme;
</script>

<DarkMode bind:theme />

<h1>This is {theme} mode.</h1>
<p>Change the theme and reload the page.</p>

<button on:click={() => (theme = switchTheme)}>
  Switch to {switchTheme} mode
</button>

<style>
  :global(.dark) {
    background: #032f62;
    color: #f1f8ff;
  }
</style>

When using server-side rendering (SSR), employ the afterUpdate lifecycle to access document.body or document.documentElement.

<script>
  import DarkMode from "svelte-dark-mode";
  import { afterUpdate } from "svelte";

  let theme;

  afterUpdate(() => {
    document.body.className = theme; // "dark" or "light"
  });
</script>

<DarkMode bind:theme />

An alternative to the afterUpdate lifecycle hook is to check if the type of window is undefined.

$: if (typeof window !== "undefined") {
  document.body.className = theme;
}

The theme will automatically be updated if the user changes their color scheme preference at the system level.

Use the key prop to customize the local storage key used to track the persisted theme.

By default, the key is "theme".

<DarkMode key="custom-theme-key" />

Use the localStorage.getItem API to programmatically access the stored value.

localStorage.getItem("custom-theme-key"); // "dark" || "light"

• on:change: dispatched when theme is updated

<DarkMode
  on:change={(e) => {
    console.log(e.detail); // "dark" | "light"
  }}
/>

CHANGELOG.md

MIT