Cómo funcionan los tokens de modo oscuro
Los tokens de modo oscuro son un segundo conjunto de valores asociado a los mismos nombres semánticos que el tema claro, de modo que cambiar de modo reapunta nombres como --color-surface a colores distintos sin que ningún componente necesite saber qué modo está activo.
Por qué invertir no funciona
El enfoque intuitivo (voltear la luminosidad, intercambiar blanco y negro) produce un tema oscuro que se ve mal de formas difíciles de nombrar al principio.
Algunos motivos concretos:
El negro puro es agresivo. La mayoría de temas oscuros bien hechos usan un gris muy oscuro, a menudo con un ligero matiz, en vez de #000000. El texto blanco a máximo contraste sobre negro puro provoca halación, y el texto parece sangrar.
Los colores saturados se leen más brillantes sobre oscuro. Un azul que queda cómodo sobre blanco puede vibrar contra un fondo oscuro. Las variantes para modo oscuro normalmente se desaturan y se aclaran, no solo se aclaran.
La elevación se invierte. En temas claros, las superficies elevadas proyectan sombra. En temas oscuros la sombra es casi invisible, así que las superficies elevadas se indican volviéndose más claras. Los tokens de sombra que funcionan en un modo no transportan información en el otro.
Las ratios de contraste no sobreviven al volteo. Una combinación que pasa AA en claro puede fallar en oscuro. Cada combinación hay que volver a comprobarla, no solo recalcularla.
La estructura que lo hace funcionar
El modo oscuro es un problema de nomenclatura antes que de color. Solo sale limpio si la capa semántica ya existe.
:root {
--color-surface: var(--grey-50);
--color-text-primary: var(--grey-900);
}
[data-theme="dark"] {
--color-surface: var(--grey-900);
--color-text-primary: var(--grey-50);
}Los componentes referencian --color-surface. Nunca llegan a enterarse de que hay un modo. Añadir un tercer tema más adelante es otro bloque con la misma forma, no un cambio en cada componente.
Si los componentes referencian primitivos directamente, no hay nada que reapuntar, y el modo oscuro se convierte en un condicional en cada archivo.
Genera los dos a la vez
Un tema oscuro añadido seis meses después es una revisión de todos los componentes. Producido junto al tema claro, a partir de las mismas escalas, sale gratis.
Este es el argumento más fuerte para decidir los modos desde el principio aunque solo vayas a lanzar uno: el coste estructural está en la nomenclatura, y la nomenclatura es barata antes de que haya componentes y cara después.
Dónde encaja Flash DSM
Cada sistema generado produce claro y oscuro a la vez, ligados a los mismos nombres semánticos, con el contraste comprobado en las combinaciones en vez de derivar un modo del otro a posteriori.