build69
Sign inGet API key
build69  /  Components  /  Navigation  /  ThemeToggle

ThemeToggle

v1.0.8Updated 27 Aug 2026

Light / 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.

View source← Back to catalog

Preview

Live · 8 stories
DefaultOpen ↗
▸Why this is recommendedthemedark-modecolor-schemetoggle+3

The default, out-of-the-box ThemeToggle.

Recommended for+14
  • ✓App bars / top bars
  • ✓Settings > appearance
  • ✓Marketing site headers
Tags+6
themedark-modecolor-schemetogglenext-themesnavigationdefault
Features+4
  • 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
Not recommended for−2
  • ✕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.

get_registry_item({ name: "ThemeToggle" })

Usage

import { ThemeToggle } from '@/components/navigation/theme-toggle';

<ThemeToggle accent />

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

PropTypeRequired
variant

Interaction form (default "menu")

'menu' | 'segmented' | 'icon'—
showSystem

Offer the follow-OS option (default true)

boolean—
accent

Append a brand-accent submenu (menu variant only)

boolean | AccentPickerProps—
size

Control size (default "sm")

'xs' | 'sm' | 'md' | 'lg'—
labels

Override built-in UI strings (i18n): trigger aria-label + Light/Dark/System/Accent names. Merged over DEFAULT_THEME_TOGGLE_LABELS

Partial<ThemeToggleLabels>—

Related

Platform docsAll componentsSource files