Components
Theme preference control
Choose native light, system or dark appearance with a stable pressed state.
On this page
Purpose and composition
Choose native light, system or dark appearance with a stable pressed state.
Use in Appearance settings; source controls are locally scoped preference UI.
Anatomy
| Part | Responsibility |
|---|---|
| Group | Three equal-width icon controls |
| Selection | Raised surface and filled icon |
Configuration and variants
| Input / variant | Contract |
|---|---|
| preferences | light / system / dark |
| storage | sonarist-theme with helpdesk-theme fallback |
| events | storage and sonarist-theme-change |
States and feedback
| State | Visible / behavioral result |
|---|---|
| Pressed | aria-pressed=true |
| System | OS media changes update class |
| Initial | Root script applies before paint |
Interaction and responsive behavior
- Selecting writes localStorage and dispatches change.
- Native colorScheme follows resolved mode.
- Do not claim server/account synchronization.
Accessibility contract
- Each control has label/title.
- aria-pressed exposes selection.
Known implementation limits
Group is a div with aria-label rather than a semantic role=group; assess announcement in assistive technology.
Composition example
<ThemeToggle />Source references
| File | Responsibility |
|---|---|
| components/theme-toggle.tsx | ThemeToggle |
Examples from the app
Actual Sonarist components with fictional conversations, people, example.com addresses and simulated operational states. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-08 · Revision 10f45d1377b5 · Documentation v1.0.0