Components / Controls
Theme switcher
System, light or dark, as a compact segmented control.
@fabrials/ui
Stored preference: system
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { ThemeSwitcher } from "@fabrials/ui";
API reference
| Prop / export | Type | Description |
|---|---|---|
value | system | light | dark | The stored preference. |
onValueChange | (value) => void | The host applies and stores it. |
showLabels | boolean | Words next to the icons. |
size | default | sm | lg | sm by default; lg paints 44px on every pointer (a settings row of primary targets), so the group is 50px tall. |
Behavior
The host owns storage and the class on the root element; the switcher only presents the choice.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.