Skip to content

Theme Toggles

Light and dark mode switches.

2 component(s)

System, Light and Dark Theme Dropdown – Tailwind CSS theme toggles preview

System, Light and Dark Theme Dropdown

Accessible Tailwind CSS dropdown to choose a light, dark or system theme, with live OS sync, saved preference and CSS variable tokens.

Tailwind CSS Theme Toggles
Light/Dark Theme Toggle – Tailwind CSS theme toggles preview

Light/Dark Theme Toggle

Tailwind CSS dark mode toggle with an animated sun/moon switch that follows the system preference, remembers the choice and can reset to system.

Tailwind CSS Theme Toggles

What is a theme toggle?

A theme toggle is a switch that lets visitors change between light and dark mode, and sometimes a third "system" option. It often shows a sun and moon icon, a sliding switch or a small dropdown. Theme toggles are common in documentation sites, dashboards, blogs and developer tools where people read for long periods.

When to use a dark mode toggle

Add a toggle when your site supports both colour schemes and you want users to override their operating system preference. If you only follow prefers-color-scheme automatically, a toggle is optional, but many users appreciate the choice.

Best practices for a light and dark mode switch:

  • Use a <button> with aria-pressed, or a checkbox or radio group with a visible or screen-reader label, so the current state is announced.
  • Store the choice in localStorage and apply it before the page renders, with a tiny inline script in the <head>, to avoid a flash of the wrong theme.
  • Fall back to prefers-color-scheme when no choice is stored, and offer a "system" option if possible.
  • Switch themes by setting an attribute such as data-theme or data-bs-theme on the <html> element and drive colours with CSS custom properties.
  • Check contrast in both themes, including focus rings, borders and disabled states.
  • Keep icon animations short and respect prefers-reduced-motion.

Bootstrap, Tailwind CSS and pure CSS toggles

Every theme toggle has a live preview and code tabs for HTML, CSS and JS. Bootstrap 6 versions build on the new alpha ES module build and its theme-* colour roles, which makes switching schemes a matter of changing one attribute. Bootstrap 5 versions use data-bs-theme, Tailwind CSS versions work with the dark: variant and a class or attribute strategy, and pure CSS versions use custom properties. Filter by framework, copy or download the toggle, and connect it to your own colour tokens.