Mode Watcher

Mode Watcher solves a specific problem that nearly every SvelteKit application encounters: managing dark and light mode correctly, including during server-side rendering. Created by Hunter Becton as part of the svecosystem project family, it has become a quiet essential in the Svelte developer’s toolkit.

The core problem is deceptively tricky. When a SvelteKit page is server-rendered, the server does not know the user’s color scheme preference. Without careful handling, users see a flash of the wrong theme before client-side JavaScript kicks in and corrects it. Mode Watcher solves this with a blocking script that runs before the page paints, reading the stored preference or system setting and applying the correct class immediately. The result is zero visible flash — the page renders in the right mode from the first frame.

The API is minimal by design. You add a <ModeWatcher /> component to your root layout, and the library provides reactive state and helper functions for reading and setting the current mode. You get mode (the current resolved mode), userPrefersMode (what the user explicitly chose), and systemPrefersMode (what the operating system reports). Toggling is a single function call, and the preference persists to localStorage automatically.

Because Mode Watcher is completely unstyled and only manages state, it works alongside any UI library without conflict. It is commonly paired with shadcn-svelte (which the same author maintains), but works equally well with Skeleton, Flowbite Svelte, DaisyUI, or plain Tailwind projects. The library does not render any visible UI — you build your own toggle button using the reactive state it provides.

The scope is intentionally narrow. Mode Watcher handles light and dark mode. If you need a multi-theme system with custom color palettes, Skeleton’s theming engine or DaisyUI’s 30+ theme system will serve you better. Mode Watcher is not trying to be a theming solution — it is solving the specific problem of binary mode management and SSR correctness.

At a few kilobytes gzipped and with zero dependencies beyond Svelte, Mode Watcher is the kind of utility that costs almost nothing to include and saves you from reimplementing color scheme logic for the hundredth time. It is a recommended addition to virtually any SvelteKit project that supports dark mode.