#ffffff · Tarjeta: rgba(255,255,255,0.08)Ambos temas
¿Qué es un esquema de color o tema?
Un tema es un conjunto con nombre de design tokens — fondo, superficie, texto, texto secundario, borde y acento — que cada componente lee en lugar de colores fijos. Cambiar de oscuro a claro sustituye los tokens una vez y toda la interfaz lo sigue, por eso un solo acento reestiliza toda la aplicación.
Ejemplo: el esquema oscuro combina texto blanco (#ffffff) con el fondo #0f2027, y el claro une #1a1a2e con #f5f7fa. Al calcular la luminancia relativa se obtiene un contraste de unos 16,7:1 en oscuro y 15,9:1 en claro — muy por encima del mínimo WCAG AA de 4,5:1 para texto normal. El texto secundario es más débil a propósito (unos 7,7:1 en oscuro y 4,4:1 en claro).
Cómo usar la vista previa de temas
- Alterna entre oscuro y claro para comparar ambos conjuntos de tokens.
- Compara las muestras de fondo, superficie y texto que forman cada esquema.
- Lee el color de acento que gobierna botones, enlaces y resaltados.
- Usa los mismos tokens en tu CSS para que la vista previa coincida con tu build.
Temas y contraste — preguntas frecuentes
¿Qué es un design token?
Un design token es un valor con nombre, como --text o --surface, al que los componentes se refieren en lugar de colores literales. Cambiar el token una vez actualiza todos los usos, y por eso el cambio de tema es instantáneo.
¿Por qué importa el contraste en un tema?
El texto debe seguir siendo legible en cualquier fondo. WCAG AA pide al menos 4,5:1 para texto normal y 3:1 para texto grande, así que conviene comprobar cada conjunto de tokens.
¿Por qué el modo oscuro no es negro puro?
Los grises muy oscuros como #0f2027 reducen el emborronado en paneles OLED y conservan cierta profundidad, así que las superficies siguen distinguiéndose sin bordes negros puros.
