Marble UI
← Components

Theme Toggle

Preview: Icon

Light / dark / system switch wired to ThemeProvider. "icon": one button cycling modes. "segmented": three options.

Import

import { ThemeToggle } from '@marbleui/ui'

Props

<ThemeToggle>

PropTypeDefaultDescription
variant'icon' | 'segmented''icon'

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitive: React Aria Button. Follow the primitive's docs for the full keyboard map.

Usage notes

Light, dark or system switch connected to ThemeProvider. It must be rendered inside a ThemeProvider.

<ThemeProvider>
  <ThemeToggle />
  <ThemeToggle variant="segmented" />
</ThemeProvider>
  • variant="icon" (default) is one button that switches between light and dark, based on the currently resolved mode. variant="segmented" shows light, dark and system as three options.
  • The icon button labels itself “Switch to dark mode” or “Switch to light mode”. The segmented control is labelled “Color mode”.
  • It has no props for the mode; set the initial mode with defaultMode on ThemeProvider, or read it with useTheme().
Example source · show
import { ThemeProvider } from '../theme-provider'
import { ThemeToggle } from './theme-toggle'

const Frame = ({ children }: { children: React.ReactNode }) => (
  <ThemeProvider scope="local" defaultMode="light" className="flex items-center gap-3 rounded-2xl border border-border p-6 text-sm">
    {children}
  </ThemeProvider>
)

export const styles = {
  Icon: () => <Frame><ThemeToggle /> <span className="text-fg-muted">This box follows the toggle</span></Frame>,
  Segmented: () => <Frame><ThemeToggle variant="segmented" /></Frame>,
}

Source: packages/ui/src/theme-toggle/theme-toggle.tsx

Catalog

Category
utilities
Priority
Core
Primitive
composed
React Aria
ToggleButton
Base UI
Toggle