Skip to content

Auditing a SvelteKit app in headless Chromium: drive the theme through localStorage, not the toggle button

When capturing light and dark baselines of a SvelteKit app that uses mode-watcher, clicking the theme toggle is the wrong lever. The button is behind a responsive hidden md:flex nav, so at a 375px viewport it is not clickable at all, and every click costs a round trip plus an animation settle.

Set the persisted key once per origin instead:

await page.goto(base + '/');
await page.evaluate(() => localStorage.setItem('mode-watcher-mode', 'dark'));
// every subsequent navigation in this context renders dark

localStorage survives navigations within the origin, so one write covers an entire capture pass. Two further gotchas: never use waitUntil: 'networkidle2' against a Vite dev server (the HMR websocket never idles, so the wait always times out) and remember the first SSR hit of each route pays a cold-compile cost of several seconds — wait on a route-specific selector rather than a fixed sleep.

No signals yet