Skip to main content

Getting Started

Start using Mode Watcher in your Svelte application.

Installation & Setup

Install the package

Install the mode-watcher package from npm.

		npm install mode-watcher
	

Add the ModeWatcher component

Add the <ModeWatcher /> component to your root +layout.svelte file.

src/routes/+layout.svelte
		<script lang="ts">
	import { ModeWatcher } from "mode-watcher";
	let { children } = $props();
</script>
 
<ModeWatcher />
{@render children()}
	

That's it!

You're now ready to use Mode Watcher in your Svelte app.

Here's an example of how to use the toggleMode function to toggle the mode:

src/lib/components/light-switch.svelte
		<script lang="ts">
	import { toggleMode } from "mode-watcher";
</script>
 
<button onclick={toggleMode}>Toggle Mode</button>
	

For additional information and configuration, please refer to the API reference.