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"
  }}
/>

TypeScript

svelte version 3.31 or greater is required to use this component with TypeScript.

TypeScript definitions are located in the types folder.

Changelog

CHANGELOG.md

License

MIT