Dark Mode

Dark mode is a single class on the document root, dark, that Tailwind's dark variant keys off. The whole feature is deciding when that class is on and making sure it is right from the very first paint.

No flash on load

The catch with theming a client-rendered app is that the app decides the theme, but the app has not loaded yet on first paint. Left alone that gives you a flash of the wrong theme before the bundle boots. The pre-mount script in init-cover.html closes that gap. It runs before the bundle, reads the stored color-scheme from local storage, falls back to the OS prefers-color-scheme when nothing is stored, and sets the class straightaway. So the correct theme is on screen from the first frame.

The toggle

Inside the app the useDarkMode composable owns the live state. It exposes isDark, isLight, and a toggle, and toggling does three things, flips the reactive flag, writes the choice to local storage, and updates the class on the root. Storing the choice is what lets the pre-mount script pick it back up on the next load, which is how the theme survives a refresh and a return visit.

The initial value follows the same order as the pre-mount script, stored choice first, OS preference second, so the composable and the pre-mount markup always agree on what the theme is.

See also

Cover Loading for the pre-mount shell that carries the no-flash script.

© Websanova 2026 About Privacy