Aprende a plantear modo oscuro de forma mantenible con utilidades y variantes dark: sin duplicar diseño.
Dark mode no es invertir colores al azar: necesitas contraste, jerarquía y estados coherentes.
En Tailwind se trabaja con variantes dark: para adaptar fondo, texto y bordes sin duplicar todo el CSS.
La práctica profesional es definir tokens visuales claros y aplicarlos de forma repetible en componentes.
En esta lección montarás un bloque que funciona en light/dark con una sola estructura.
Si la jerarquía visual no funciona en modo claro, en oscuro funcionará peor.
Empieza definiendo niveles: fondo principal, superficie, texto base y texto secundario.
Después adapta cada nivel con dark: sin cambiar espaciado ni estructura.
Mantener el mismo ritmo visual evita tener dos diseños distintos difíciles de mantener.
La variante dark: modifica utilidades cuando el modo oscuro está activo.
No todo texto claro sobre oscuro tiene buen contraste real.
Evita usar tonos demasiado apagados para texto principal en dark mode.
Prueba foco y hover en ambos temas para no romper interacción.
Haz revisión visual rápida en móvil y desktop antes de cerrar el componente.
Aprende a plantear modo oscuro de forma mantenible con utilidades y variantes dark: sin duplicar diseño.
Código del tema: class="bg-white dark:bg-slate-900"
Si la jerarquía visual no funciona en modo claro, en oscuro funcionará peor.
Empieza definiendo niveles: fondo principal, superficie, texto base y texto secundario.
Después adapta cada nivel con dark: sin cambiar espaciado ni estructura.
Mantener el mismo ritmo visual evita tener dos diseños distintos difíciles de mantener.
La variante dark: modifica utilidades cuando el modo oscuro está activo.
<article class="rounded-xl border border-slate-200 bg-white p-6 text-slate-900 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">Contenido</article>No todo texto claro sobre oscuro tiene buen contraste real.
Evita usar tonos demasiado apagados para texto principal en dark mode.
Prueba foco y hover en ambos temas para no romper interacción.
Haz revisión visual rápida en móvil y desktop antes de cerrar el componente.