Theme Switch
Drop-in theme picker button wired directly to ZyraThemeService — a compact toggle or a full 5-theme menu.
API
All inputs and configuration options for zyra-theme-switch.
| Prop | Type | Default | Description |
|---|---|---|---|
mode | 'menu' | 'toggle' | 'menu' | Whether the trigger opens a theme menu or toggles dark/light directly |
disabled | boolean | false | Disables the trigger button |
aria-label | string | 'Toggle theme' | Accessible name for the trigger button |
Tokens
CSS custom properties zyra-theme-switch reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Background--zyra-color-theme-switch-bg | var(--zyra-color-surface-inset) | Fill color of the trigger button. |
Background (hover)--zyra-color-theme-switch-bg-hover | var(--zyra-color-surface-raised) | Fill color of the trigger button, and of a menu option, on hover. |
Text--zyra-color-theme-switch-text | var(--zyra-color-foreground) | Text/icon color of the trigger and menu options. |
Border--zyra-color-theme-switch-border | var(--zyra-color-border-color) | Border color of the trigger button. |
Panel background--zyra-color-theme-switch-panel-bg | var(--zyra-color-surface) | Fill color of the menu panel (menu mode). |
Panel shadow--zyra-color-theme-switch-panel-shadow | var(--zyra-card-elevated-shadow) | Drop shadow behind the menu panel. |
Active check--zyra-color-primary | var(--zyra-color-accent) | Color of the checkmark on the active theme, and the focus outline. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Trigger has a 44×44px hit-slop for touch targets (WCAG 2.5.5) despite a 36px visual size
- Menu options use role="menuitemradio" with aria-checked reflecting the active theme
- Dropdown panel repositions to stay inside the viewport on any screen size