ThemeToggle
Lets the reader pick light, dark, high contrast or the system setting. Use the segmented form in settings and the menu form in a crowded top bar.
- ThemeToggle
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, ThemeToggle
Icons only:
Dark theme, ThemeToggle
Icons only:
High contrast theme, ThemeToggle
Icons only:
UsageLink to the section Usage
import { ThemeToggle } from '@skribly/ui/theme'<ThemeToggle
label="Theme"
options={{ light: 'Light', dark: 'Dark', contrast: 'High contrast', system: 'Same as system' }}
/>
<ThemeToggle variant="menu" label="Theme" options={options} descriptions={hints} />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- The segmented form is a radio group: Tab enters it, arrow keys move, Space or Enter chooses.
- The menu form is a button that opens a menu of radio items; Escape closes it and returns focus.
- The selected option shows a raised tile or a check mark, never colour alone, and stays visible in Windows high contrast.
- In a narrow container the words hide visually but stay in the accessible name.
This demo runs through axe in all three themes on every test run. See what the tests check.