Geist Design System

Theme Switcher

Component that allows users to switch between light and dark themes.

Default
Select a display theme:

Disabled
Select a display theme:

Best Practices
  • Use Theme Switcher for the canonical Light / System / Dark control. Place it once per app, in the footer or settings, not duplicated across pages.
  • Pass small for dense chrome (footers, dropdowns); use the default size on a settings page where there’s room for the labels to breathe.
  • Theme Switcher reads from and writes to next-themes, so wrap the app in GeistProvider once at the root and don’t mirror its state into local React state.
  • The control auto-disables when forcedTheme is set on the provider; setting disabled manually is for read-only previews of the control itself.
  • Don’t rebuild a theme picker with Switch or three icon buttons. Theme Switcher already handles the icons, the aria-label per option, and System detection.
  • The component composes its own labels from the theme keys (light, system, dark); leave them alone so they stay translatable through next-themes.