CursosEmpresasBlogLiveConfPrecios

Contenido del curso

No sé dónde empezar

Proyecto: Platzi Travel

Tomar examen

Dark Mode en Tailwind con JavaScript

Resumen

El dark mode de Tailwind CSS 2.0 es una de las features más potentes para construir interfaces modernas con cambio de tema dinámico. Aprenderás a configurarlo, aplicarlo a componentes y conectarlo con JavaScript para alternar entre claro y oscuro con un botón.

Este recurso es para personas que ya trabajan con Tailwind y quieren llevar su portafolio a otro nivel con una página responsiva y con tema conmutable.

Cómo activar el dark mode en el archivo de configuración de Tailwind

El primer paso ocurre en el archivo tailwind.config.js. Por defecto, la propiedad darkMode viene en false, pero Tailwind ofrece dos modos de activación: media y class.

La diferencia es clave. Con media, el tema cambia según la preferencia del sistema operativo. Con class, tú controlas cuándo aplicar el modo oscuro agregando la clase dark a un elemento padre, normalmente el <html>. Para un toggle manual, class es la opción correcta [02:30].

¿Qué hace darkMode: 'class' en Tailwind? Le indica a Tailwind que active los estilos dark: solo cuando exista una clase dark en un ancestro del elemento. Así puedes alternar el tema con JavaScript.

Después de cambiar la configuración, debes correr tailwind build en la terminal para que los nuevos estilos se compilen en tu CSS final.

Cómo aplicar clases dark a los componentes de la página

Una vez activado el modo, cada utilidad de Tailwind admite el prefijo dark:. Esto significa que puedes declarar dos estilos en una sola línea: el del tema claro y el del oscuro.

En el body, por ejemplo, agregas dark:bg-gray-900 para que el fondo se oscurezca cuando la clase dark esté activa [04:10]. La paleta usada en el diseño combina tres tonos:

  • Gray 900 para el fondo principal del body.
  • Gray 800 para la navbar y algunas cards.
  • Gray 700 para las cards alternas, según el patrón del Figma.

Para los textos que pierden contraste sobre fondos oscuros, se usa dark:text-white. Esto aplica a títulos de secciones como rentas destacadas, recomendados y la sección de FAQs, que originalmente quedaban invisibles sobre el fondo oscuro [09:45].

Cómo manejar íconos SVG en dark mode

Los íconos requieren un truco extra. Si tu svg usa un path con color sólido, agrega la clase fill-current y luego dark:text-white al contenedor. Así el ícono hereda el color del texto y cambia automáticamente con el tema.

Cómo arreglar el z-index de la navbar

Un detalle frecuente: al hacer scroll, los elementos atraviesan la navbar fija. La solución es agregar z-10 a la navbar junto con la clase fixed, lo que la mantiene siempre por encima del contenido [05:20].

Cómo crear el toggle de dark mode con JavaScript

El dark mode estático no sirve de mucho sin un botón que lo controle. Aquí entra un poco de JavaScript vanilla insertado al final del body dentro de una etiqueta <script>.

La lógica tiene tres partes:

  1. Seleccionar el elemento <html> con document.querySelector usando un id.
  2. Seleccionar los botones toggle, uno para escritorio y otro para la versión móvil, cada uno con su id único.
  3. Agregar un event listener de tipo click a cada botón que ejecute la función de cambio.

La función toggleDarkMode revisa con classList.contains('dark') si la clase ya existe. Si la encuentra, la remueve con classList.remove. Si no, la agrega con classList.add [16:20].

¿Por qué se necesitan dos ids distintos para el toggle? Porque los ids en HTML deben ser únicos. Uno controla el botón de la navbar en escritorio y otro el de la tab bar en móvil, aunque ambos llamen a la misma función.

Es fundamental envolver el svg del ícono dentro de un <button> y asignarle el id correspondiente. Sin ese contenedor, el clic no se registra correctamente sobre la lunita.

Cómo replicar el toggle en la versión móvil

La tab bar inferior del diseño móvil también necesita su propio botón con id toggleSmall. El event listener apunta a la misma función toggleDarkMode, así que el comportamiento queda sincronizado entre ambas vistas [17:40].

Para que el contraste funcione en la tab bar, se aplica dark:bg-gray-800, un tono que diferencia el fondo de la barra del fondo general sin perder legibilidad.

Qué optimizaciones quedan pendientes después del dark mode

Con el toggle funcionando en escritorio y móvil, el proyecto ya es portafolio listo. El footer se mantiene en su color original porque no rompe el diseño en ninguno de los dos temas, una decisión común para mantener jerarquía visual.

Falta un paso técnico importante: configurar PurgeCSS para producción. Esta herramienta elimina las clases de Tailwind que no se usan en el HTML final, reduciendo drásticamente el tamaño del CSS que llega al navegador.

¿Cómo te quedó tu implementación del dark mode? Cuéntame en los comentarios qué paleta elegiste y si combinaste el toggle con localStorage para recordar la preferencia del usuario.