svelte-dark-mode

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.

---

Installation

# Yarn
yarn add -D svelte-dark-mode

# npm
npm i -D svelte-dark-mode

# pnpm
pnpm i -D svelte-dark-mode

Usage

Basic

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>

Server-side rendering (SSR)

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;
}

System preference change

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

Custom localStorage key

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"

API

Props

Name	Type	Default value
theme	"dark" or "light"	"dark"
key	string	"theme"

Dispatched events

• on:change: dispatched when theme is updated

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

Changelog

CHANGELOG.md

License

MIT