This changes the whole site
Theme Toggle
Two icons and one plate, driven by a class on the page, so it’s right on first paint. Switching crossfades everything.
Usage
import { ThemeToggle } from '@wdzyi/ui';
// In <head>, so the theme is right before anything paints.
<script dangerouslySetInnerHTML={{ __html: `
try {
var saved = localStorage.getItem('cw-theme');
document.documentElement.classList.add(saved === 'light' ? 'light' : 'dark');
} catch (e) {
document.documentElement.classList.add('dark');
}
` }} />
<ThemeToggle />Part of @wdzyi/ui. See setup to install it, or copy the code above.
Notes
- It holds no state of its own. The plate and icons are styled from the class on <html>, so there’s nothing to flash or hydrate.
- The crossfade is a view transition. Browsers without them, and anyone asking for less motion, just switch.
- The choice is kept in localStorage under cw-theme.