Components
Theme controls
Expose light, device and dark choices using a compact named control group.
On this page
Purpose and placement
Expose light, device and dark choices using a compact named control group.
Anatomy
| Part | Behavior |
|---|---|
| Three options | Sun, monitor and moon represent light, system and dark. |
| Selection | Foreground/background treatment and aria-pressed. |
| Runtime bridge | The source global theme runtime persists and applies preference. |
Configuration and contract
| Input or decision | Implementation |
|---|---|
| ThemeModeToggle | compact boolean and className. |
| Theme values | light / system / dark; resolved appearance can differ from selected system mode. |
States and feedback
- Light and dark presentations captured.
- System resolves to device preference.
- Missing storage must fall back safely.
Usage rules
- Keep all three choices together.
- Do not replace the source runtime with a per-component theme state.
- Captures use the native theme runtime in an isolated browser context. Cross-session persistence and device preference transitions need separate checks.
Accessibility and verification
Named buttons and aria-pressed convey selection without relying on the icons. Verify preference updates with keyboard and system setting changes.
Source references
| File | Responsibility |
|---|---|
| components/theme-mode-toggle.tsx | Audited Townwell implementation; use this file when extending this interface. |
| components/footer-theme-mode-toggle.tsx | Audited Townwell implementation; use this file when extending this interface. |
| lib/theme.ts | Audited Townwell implementation; use this file when extending this interface. |
Examples from the app
Actual Boise Today and Townwell UI with synthetic editorial, business, review, media metadata and analytics. Existing Boise imagery; no live data changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision ce8bc72b96da · Documentation v0.1