Theme toggle
Also called: dark mode switch, theme switcher, light/dark toggle, appearance switch.
A switch that changes every color on the page between a light and a dark theme, and often a "System" option that follows the device. A good one remembers your choice.
One switch changes every color on the page between a light and a dark theme. Sites often remember your choice.
Light
Say it in a prompt
Add a theme toggle in the header: a 46px switch that moves its knob with transform over 260ms and switches the site between light and dark by setting data-theme on <html>. Start from the system setting, save the choice in localStorage, and change the colors instantly (no color fade). Seen on
- Squarespace Foundations: The full-screen "Index" menu has a "Dark" switch for changing the color theme.
- Vercel Geist design system: The Theme Switcher component lets people pick Light, System or Dark.
You might describe it as
- switch for dark mode in the corner
- button that flips the site to black
- sun and moon toggle