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.