Theme tokens and contrast
A maintainable theme uses semantic tokens rather than scattering arbitrary hex values across components. Think in roles—surface, surface-raised, text-primary, text-muted, border-subtle, brand, and danger—then map each role to light and dark values.
Check text contrast, disabled controls, form errors, charts, and focus rings in both themes. A muted color that looks elegant on a white background may become unreadable on a dark surface. Test real states, not just the default card.
Specifications & Requirements
- Theme layer:
Semantic design tokens - Validation:
Contrast, focus, disabled, error, hover - Persistence:
Application responsibility - Avoid:
Uncoordinated one-off colors
Key Takeaways
- Use a coordinated palette rather than simply inverting colors.
- A theme toggle needs application state and persistence.
- Test accessibility states in both light and dark themes.