https://github.com/svecosystem/mode-watcher

Simple light/dark mode management for SvelteKit apps. 🌑 ←→ ☀️
https://github.com/svecosystem/mode-watcher

Last synced: 2 days ago
JSON representation

Simple light/dark mode management for SvelteKit apps. 🌑 ←→ ☀️

• Host: GitHub
• URL: https://github.com/svecosystem/mode-watcher
• Owner: svecosystem
• License: mit
• Created: 2023-10-22T18:56:39.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-04-19T21:26:05.000Z (7 months ago)
• Last Synced: 2024-05-02T04:17:50.371Z (7 months ago)
• Language: Svelte
• Homepage: https://mode-watcher.svecosystem.com
• Size: 2.04 MB
• Stars: 201
• Watchers: 5
• Forks: 6
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# Mode Watcher

Simple utilities to manage light & dark mode in your SvelteKit app.

[![npm version](https://flat.badgen.net/npm/v/mode-watcher?color=yellow)](https://npmjs.com/package/mode-watcher)

[![npm downloads](https://flat.badgen.net/npm/dm/mode-watcher?color=yellow)](https://npmjs.com/package/mode-watcher)

[![license](https://flat.badgen.net/github/license/svecosystem/mode-watcher?color=yellow)](https://github.com/svecosystem/mode-watcher/blob/main/LICENSE)

[![](https://dcbadge.vercel.app/api/server/fdXy3Sk8Gq?style=flat)](https://discord.gg/fdXy3Sk8Gq)

## Installation

```bash

npm install mode-watcher

```

## Usage

Add the `ModeWatcher` component to your root `+layout.svelte` file.

```svelte

	import { ModeWatcher } from "mode-watcher";

```

The `ModeWatcher` component will automatically detect the user's preferences and apply/remove the `"dark"` class, along with the corresponding `color-scheme` style attribute to the `html` element.

`ModeWatcher` will automatically track operating system preferences and apply these if no user preference is set. If you wish to disable this behavior, set the `track` prop to `false`:

```svelte

```

`ModeWatcher` can also be configured with a default mode instead of automatically detecting the user's preference.

To set a default mode, use the `defaultMode` prop:

```svelte

```

`ModeWatcher` can manage the `theme-color` meta tag for you.

To enable this, set the `themeColors` prop to your preferred colors:

```svelte

```

## API

### toggleMode

A function that toggles the current mode.

```svelte

	import { toggleMode } from "mode-watcher";

Toggle Mode

```

### setMode

A function that sets the current mode. It accepts a string with the value `"light"`, `"dark"` or `"system"`.

```svelte

	import { setMode } from "mode-watcher";

 setMode("light")}>Set Light Mode

 setMode("dark")}>Set Dark Mode

```

### resetMode

A function that resets the mode to system preferences.

```svelte

	import { resetMode } from "mode-watcher";

 resetMode()}>System

```

### mode

A readable store that contains the current mode. It can be `"light"` or `"dark"` or `undefined` if evaluated on the server.

```svelte

	import { setMode, mode } from "mode-watcher";

	function handleModeChange() {

		if ($mode === "light") {

			setMode("dark");

		} else {

			setMode("light");

		}

	}

{$mode}

```

### userPrefersMode

A writeable store that represents the user's mode preference. It can be `"light"`, `"dark"` or `"system"`.

### systemPrefersMode

A readable store that represents the operating system's mode preference. It can be `"light"`, `"dark"` or `undefined` if evaluated on the server. Will automatically track changes to the operating system's mode preference unless this is disabled with the `tracking()` method which takes a boolean. Normally this is disabled by setting the `track` prop to false in the `` component.

## Demo / Reproduction Template

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/svecosystem/mode-watcher-reproduction)

## Sponsors

This project is supported by the following beautiful people/organizations:



  

    

  



## License

Published under the [MIT](https://github.com/svecosystem/mode-watcher/blob/main/LICENSE) license.

Made by [@huntabyte](https://github.com/huntabyte), [@ollema](https://github.com/ollema), and [community](https://github.com/svecosystem/mode-watcher/graphs/contributors) 💛











## Community

Join the Discord server to ask questions, find collaborators, or just say hi!