Theme Toggle
Switch between light and dark mode with a smooth CSS transition — swap custom properties on the root element.
Also called: dark mode switch, color scheme toggle, appearance mode
Preview card
This card and the page background transition together when you switch themes.
How it works
Define light-theme values as CSS custom properties. Toggle a class on body and add transition to color-related properties.
- Persist preference in
localStorage - Respect
prefers-color-schemeas the default