Theme Switcher
Selects a light, dark, or system-matched interface theme.
@rivetui/theme-switcherPreview
Explore each composition interactively, then open its code in the same context.
Default
Use the segmented switcher when all theme choices should remain immediately visible.
Note
ThemeScript prevents a flash of the wrong theme during the initial page load.
Interface theme
Match the system or choose a fixed appearance.
LightSystemDark
- Preference
- dark
- Resolved
- dark
Menu triggers
Choose a labelled menu for clarity or an icon trigger where horizontal space is limited.
Note
The disabled prop is available on the switcher and both menu variants.
Registry
Installation
Add the component source and its declared dependencies with the shadcn CLI.
Install component
bunx --bun shadcn@latest add @rivetui/theme-switcherPublic interface
API reference
Component-specific props are listed here. Native element and Base UI props continue to pass through.
ThemeSwitcher
| Prop | Type | Default |
|---|---|---|
defaultTheme | "light" | "dark" | "system" | "system" |
storageKey | string | "theme" |
onValueChange | (theme: Theme) => void | — |
ThemeMenu
| Prop | Type | Default |
|---|---|---|
defaultTheme | "light" | "dark" | "system" | "system" |
storageKey | string | "theme" |
onValueChange | (theme: Theme) => void | — |
disabled | boolean | false |
variant | "label" | "icon" | "label" |
ThemeScript
| Prop | Type | Default |
|---|---|---|
defaultTheme | "light" | "dark" | "system" | "system" |
storageKey | string | "theme" |
nonce | string | — |
useTheme
| Member | Type | Default |
|---|---|---|
theme | Theme | — |
resolvedTheme | "light" | "dark" | — |
setTheme | (theme: Theme) => void | — |