ThemeSwitcher

Light/dark/system theme switcher with localStorage persistence, system preference detection, and multiple interaction modes.

Variant

Size

Strategy

Disabled

Loading syntax highlighting...

01 Examples

Cycle vs. toggle

Default cycles light → dark → system. Pass strategy='toggle' to flip between light and dark only.

Loading syntax highlighting...

Variants and sizes

Loading syntax highlighting...

In a settings panel

Realistic use — outlined trigger inline with related appearance preferences.

Appearance

Color theme

Reduce motion

Loading syntax highlighting...

02 Customization

Branded trigger

Override the button and icon slots for a gradient brand-look. Pass storageKey=false for ephemeral switching without persistence.

Loading syntax highlighting...

03 Accessibility

The trigger carries a dynamic aria-label and title that name the active theme ("Light mode" / "Dark mode" / "System theme"). Focusable via Tab, activated with Enter / Space; uses focus-visible: for keyboard-only rings. In system mode the UI live-follows prefers-color-scheme changes natively via color-scheme: light dark — no JavaScript needed.

04 API Reference

10 props

No matching properties

No matching properties

05 Installation

Import

Loading syntax highlighting...

FOUC Prevention

Loading syntax highlighting...