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.
<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:
<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.
CSR/SPA/SSG Users
If you're using SvelteKit with ssr: false, adapter-static with a fallback page, or any other client-side rendered setup, you may experience a flash of unstyled content (FOUC) before mode-watcher hydrates.
See the CSR/SPA FOUC Prevention guide for a simple inline script solution.