https://github.com/metonym/svelte-dark-mode

Support dark mode in your Svelte apps
https://github.com/metonym/svelte-dark-mode

color-scheme-preference dark-mode localstorage persist prefers-color-scheme ssr svelte svelte-component theme typescript typescript-definitions

Last synced: 10 days ago
JSON representation

Support dark mode in your Svelte apps

• Host: GitHub
• URL: https://github.com/metonym/svelte-dark-mode
• Owner: metonym
• License: mit
• Created: 2020-04-21T23:41:13.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-07-19T17:45:44.000Z (over 1 year ago)
• Last Synced: 2024-10-14T08:43:41.719Z (23 days ago)
• Topics: color-scheme-preference, dark-mode, localstorage, persist, prefers-color-scheme, ssr, svelte, svelte-component, theme, typescript, typescript-definitions
• Language: Svelte
• Homepage: https://metonym.github.io/svelte-dark-mode
• Size: 488 KB
• Stars: 42
• Watchers: 2
• Forks: 3
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-dark-mode

[![NPM][npm]][npm-url]

> Support dark mode in your Svelte apps.

This component sets the theme based on the user’s preferred color scheme using [window.matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia).

The preferred theme is persisted using the [window.localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).

---

## Installation

```bash

# 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.

```svelte

  import DarkMode from "svelte-dark-mode";

  let theme;

  $: switchTheme = theme === "dark" ? "light" : "dark";

  $: document.body.className = theme;

This is {theme} mode.

Change the theme and reload the page.


 (theme = switchTheme)}>

  Switch to {switchTheme} mode

  :global(.dark) {

    background: #032f62;

    color: #f1f8ff;

  }

```

### Server-side rendering (SSR)

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

```svelte no-eval

  import DarkMode from "svelte-dark-mode";

  import { afterUpdate } from "svelte";

  let theme;

  afterUpdate(() => {

    document.body.className = theme; // "dark" or "light"

  });

```

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

```js no-eval

$: 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"`.

```svelte no-eval

```

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

```js

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

```svelte no-eval

 {

    console.log(e.detail); // "dark" | "light"

  }}

/>

```

## Changelog

[CHANGELOG.md](CHANGELOG.md)

## License

[MIT](LICENSE)

[npm]: https://img.shields.io/npm/v/svelte-dark-mode.svg?color=%23ff3e00&style=for-the-badge

[npm-url]: https://npmjs.com/package/svelte-dark-mode