Theme toggle
Toggles light/dark theme
Syncs with the site theme.
Browse components
ThemeToggle
Sun and moon control that syncs the dark class on the document element with storage.
atoms 3 variants
Variants / states: defaultghostoutline
Live example
Default usage you can copy and adapt.
Props
The props you are most likely to need, with types and defaults.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| size | 'sm' | 'md' | 'lg' | No | md | Control size |
| variant | 'default' | 'ghost' | 'outline' | No | default | Visual style |