Tema y modo oscuro

El modo oscuro siempre empieza bien. Añade dark:bg-slate-900 junto a bg-white, dark:text-slate-100 junto a text-slate-900, y la pantalla de inicio resulta convincente en diez minutos. Después llega todo lo demás: cuarenta componentes, cada uno con sus fondos, sus bordes y sus estados al pasar el cursor. Cada clase de color reclama una segunda. Sus atributos class duplican su longitud y, un mes más tarde, comprueba que conviven tres tonos de borde oscuro porque nadie recuerda cuál se había elegido.

El síntoma es real, pero la causa no es el modo oscuro: es haber escrito colores literales en los componentes. bg-white describe un pigmento, no un rol. Mientras sus componentes nombren pigmentos, cada tema adicional multiplica las clases. Si, en cambio, nombran roles —la superficie de una tarjeta, el color del texto corriente, el de un borde discreto—, cambiar de tema consiste en redefinir una docena de valores en un único lugar, y los componentes ya no contienen ni una sola variante dark:.

Definir su tema

Toda la personalización vive en la hoja de estilos, bajo @theme. Cada declaración produce a la vez una variable CSS y las utilidades correspondientes: