Components
Theme selector
Offer light, dark, and system without changing the semantic responsibilities of the palette.
On this page
Purpose and usage
Offer light, dark, and system without changing the semantic responsibilities of the palette.
Use the existing selector for the product’s actual theme. Documentation screenshot controls are independent.
Anatomy
| Part | Contract |
|---|---|
| Choice | Labeled mode buttons. |
| Persistence | radarist-theme browser storage. |
| Root styling | data-theme for an explicit mode; absence for system. |
Variants and configuration
| Configuration | Behavior |
|---|---|
| Light | Use base tokens. |
| Dark | Use explicit dark overrides. |
| System | Follow OS preference. |
State coverage
| State | Implemented behavior |
|---|---|
| Selected | Current mode is visibly distinguished. |
| Initial load | Saved explicit preference is applied by layout script and component. |
| Storage unavailable | Theme script catches storage access failures. |
Interaction and responsive behavior
- Keep mode preference independent of other local preference forms.
- Use the same storage key and root attribute in any new entry point.
- Review initial rendering for theme mismatch.
Accessibility contract
- Buttons need names and clear selected semantics.
- Mode icons do not replace labels.
- Test all choices with keyboard activation.
Known gaps and readiness
This is browser preference persistence. It is not proof of a saved cross-device account setting.
Composition example
<ThemeSelector />Source references
| File | Responsibility |
|---|---|
| app/components/theme-selector.tsx | Theme choice and browser storage |
| app/components/app-header.tsx | Application placement |
Examples from the app
Actual Radarist components with fictional data. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision 0103e2549959 · Documentation v0.1