Lesson 3: Color, Contrast & Dark Mode — One Theme, Two Modes
The PM asks for dark mode, and you discover every component needs its own `dark:bg-gray-900 dark:text-white`. This lesson teaches you to define `semantic color tokens` with CSS variables — so dark mode is a value swap in one place, not a `dark:` duplicated on every element.
A semantic color token is like saying 'wall color' instead of 'this exact beige'. Switch to night mode and everything tagged 'wall color' repaints at once — without touching each wall separately.
- semantic color token
- A token named for a role — `surface`, `on-surface`, `border` — not a hue. The component asks for the role, and the theme decides which hue fits each mode.
- CSS-variable theming
- Defining color values as CSS variables (`--surface`) in `:root` and overriding them under `.dark`. Components reference the variable, so swapping the value changes all of them at once.
- contrast ratio
- A measure of readability between text color and background. WCAG AA requires at least 4.5:1 for normal text — and a semantic token must meet it in both modes.
- dark mode strategy
- The choice of how to implement dark mode: duplicating `dark:` on every element (unmaintainable) vs swapping token values in one place via a `.dark` class (maintainable).
