https://github.com/svecosystem/mode-watcher
Simple light/dark mode management for SvelteKit apps. 🌑 ←→ ☀️
https://github.com/svecosystem/mode-watcher
Last synced: 10 months 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 (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-19T21:26:05.000Z (over 2 years ago)
- Last Synced: 2024-05-02T04:17:50.371Z (about 2 years 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.
[](https://npmjs.com/package/mode-watcher)
[](https://npmjs.com/package/mode-watcher)
[](https://github.com/svecosystem/mode-watcher/blob/main/LICENSE)
[](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";
let { children } = $props();
{@render children()}
```
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";
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.current === "light") {
setMode("dark");
} else {
setMode("light");
}
}
{mode.current}
```
### 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
[](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!
