Lección 3: Color, contraste y modo oscuro — un theme, dos modos
El PM pide modo oscuro, y descubres que cada componente necesita su propio `dark:bg-gray-900 dark:text-white`. Esta lección te enseña a definir `semantic color tokens` con variables CSS — así el modo oscuro es un cambio de valor en un solo lugar, no un `dark:` duplicado en cada elemento.
Un token de color semántico es como decir 'color de la pared' en vez de 'este beige exacto'. Cambias a modo noche y todo lo etiquetado 'color de la pared' se repinta a la vez — sin tocar cada pared por separado.
- semantic color token
- Un token nombrado por un rol — `surface`, `on-surface`, `border` — no por un tono. El componente pide el rol, y el theme decide qué tono corresponde en cada modo.
- CSS-variable theming
- Definir los valores de color como variables CSS (`--surface`) en `:root` y sobrescribirlas bajo `.dark`. Los componentes referencian la variable, así que cambiar el valor los modifica a todos a la vez.
- contrast ratio
- Una medida de legibilidad entre el color del texto y el fondo. WCAG AA exige al menos 4.5:1 para texto normal — y un token semántico debe cumplirlo en ambos modos.
- dark mode strategy
- La elección de cómo implementar el modo oscuro: duplicar `dark:` en cada elemento (imposible de mantener) vs cambiar los valores del token en un solo lugar mediante una clase `.dark` (mantenible).
