A theme toggle is a tiny control people use every day. It should show the current state clearly, respond at once and avoid a flash of the wrong theme on load. A touch of motion can make it a small pleasure. Install one with a single command, then connect it to however your app stores its theme. Remember the choice between visits.
Theme toggles switch a site between light and dark mode: icon buttons with a sun and moon, switches, three-way choices that include the system setting, and animated transitions that sweep the new theme across the page.
Offer a system option, since many people already chose a theme for their whole device, and remember the choice between visits. Apply the theme before the page paints so it never flashes the wrong colours, and label the button for screen readers.
Frequently asked questions
Enable class-based dark mode, toggle a dark class on the html element, and save the choice in localStorage. Every dark: utility then switches with it. The toggles here handle the button and its animation.
Set the theme class with a small inline script in the head, before the page paints, reading the saved choice or the system setting. Doing it in React after hydration is too late and shows a flash.
Offer it. Read prefers-color-scheme for people who haven't chosen, and give a light, dark and system choice so someone can return to following their device.
The View Transitions API can capture the page in both themes and reveal the new one with a circle or a wipe from the toggle. Fall back to an instant switch where it isn't supported or motion is reduced.
Use class-based dark mode in Tailwind and set the class before the page paints, with a small script or a library like next-themes. Then add a toggle that changes and saves the choice.
Somewhere people expect settings: the top bar, the footer or the account menu. It's a minor control, so it shouldn't compete with navigation or the main call to action.
Yes, and it's often better: light, dark and system. A three way choice lets people follow their device again after they've picked a theme by hand.
