Full catalog
Open the theme control — each option uses that theme's page background with a primary-button swatch for the current light/dark mode.
Preview panel uses zinc-folio / light.
Subset of themes
Only Lyriq and Lggr mirrors appear in the picker.
Atelier studio default
Dark mode selected
Preview width (docs toolbar)
Component doc pages, theme reference, showcase, and studio use the same viewport control in the preview toolbar — full width, desktop (1280px), tablet (834px), or mobile (390px).
Custom group label
Product mirrors only
API
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
| theme / mode | Optional | SiteTheme + ColorMode | atelier / light | Styles the control chrome (shell), not the selected preview values. |
| value | Optional | SiteTheme | — | Selected product theme (controlled). |
| colorMode | Optional | "light" | "dark" | — | Selected color mode (controlled). |
| onValueChange / onColorModeChange | Optional | callbacks | — | Theme and mode change handlers. |
| themes | Optional | SiteTheme[] | — | Optional subset for the select; defaults to all SITE_THEMES. |
| themeSelectLabel / modeTabsLabel / groupLabel | Optional | string | — | Accessible labels for theme picker, mode tabs, and group. |
| ThemeSelect | Optional | component | — | Also copy registry/ui/theme-select.tsx — swatch listbox used inside AppearanceControls. |