ThemeToggle
v1.0.17Updated 19 Oct 2026Light / dark / system color-scheme control over next-themes, in menu, segmented or single-icon form, with an optional brand-accent submenu. Drop into any app bar or settings row.
Preview
Live · 8 stories▸Why this is recommendedthemedark-modecolor-schemetoggle+3
The default, out-of-the-box ThemeToggle.
- ✓App bars / top bars
- ✓Settings > appearance
- ✓Marketing site headers
- menu / segmented / icon variants
- Light / Dark / System options
- Optional brand-accent submenu (AccentPicker)
- SSR-safe (hydration-guarded)
- Theme-token styling, no hardcoded colors
- i18n: labels prop overrides the trigger aria-label and the Light/Dark/System/Accent option names; merged over DEFAULT_THEME_TOGGLE_LABELS
- ✕Apps with no dark theme
- ✕Forcing a fixed brand theme (use ThemeProvider brandTheme)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
variantInteraction form (default "menu")
—showSystemOffer the follow-OS option (default true)
—accentAppend a brand-accent submenu (menu variant only)
—sizeControl size (default "sm")
—labelsOverride built-in UI strings (i18n): trigger aria-label + Light/Dark/System/Accent names. Merged over DEFAULT_THEME_TOGGLE_LABELS
—surfaceWhat surface this control is sitting on. "auto" (default) reads the surrounding container: AppBar declares "sidebar" for its actions row, so a control dropped there colours itself for the dark bar instead of needing text-sidebar-foreground classes passed in. "default" opts out; "sidebar" asks for the dark treatment anywhere, for a host’s own dark bar or hero. The resolved value is on the element as data-surface. MCP feedback fb_4bdd6c1e.
—