Foundations
Light, dark, and system themes
One semantic token contract with explicit user preference and operating-system fallback.
On this page
Selection and persistence
ThemeSelector supports light, dark, and system. Explicit light or dark preferences are stored under radarist-theme and applied to the root data-theme attribute. The inline layout script reads the same key before normal rendering. System mode removes the explicit attribute and follows prefers-color-scheme.
Mode contract
| Mode | Root state | Source behavior |
|---|---|---|
| Light | data-theme="light" | Base light palette and light color-scheme. |
| Dark | data-theme="dark" | Dark token overrides and dark color-scheme. |
| System | No explicit data-theme | Dark preference media query supplies overrides when needed. |
Theme-safe implementation
- Use semantic roles rather than branch-specific literal colors wherever the current component supports them.
- Review text, icons, borders, shadows, placeholders, focus indicators, and overlays in both modes.
- Project identity has its own paired fill, border, and text roles. Copying only the fill loses the theme relationship.
- Be aware of the documented hard-coded warning, status, and icon colors. A screenshot can look plausible while a contrast or meaning problem remains.
- Example-theme controls in this documentation change the viewed captures, not the portfolio site’s theme preference.
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