Implementar dark mode
La implementación del dark mode en Tailwind CSS se basa en el uso del prefijo dark: que permite aplicar estilos específicos cuando el usuario tiene activado el tema oscuro. Este sistema funciona mediante la detección automática de la preferencia del sistema operativo del usuario o a través de la configuración manual.
Configuración básica
Para habilitar el dark mode, Tailwind CSS utiliza por defecto la media query @media (prefers-color-scheme: dark). Esto significa que los estilos con el prefijo dark: se aplicarán automáticamente cuando el sistema operativo del usuario esté configurado en modo oscuro.
<div class="bg-white dark:bg-gray-900 text-black dark:text-white">
<h1 class="text-gray-900 dark:text-gray-100">Título adaptativo</h1>
<p class="text-gray-700 dark:text-gray-300">
Este contenido cambia automáticamente según la preferencia del sistema.
</p>
</div>
Estrategia de clases para dark mode
El enfoque más efectivo es definir pares de clases para cada elemento visual. Cada propiedad que pueda verse afectada por el cambio de tema debe tener su contraparte oscura:
<!-- Botón adaptativo -->
<button class="
bg-blue-500 hover:bg-blue-600
dark:bg-blue-600 dark:hover:bg-blue-700
text-white
px-4 py-2 rounded
transition-colors duration-200
">
Botón adaptativo
</button>
Configuración manual del dark mode
Para tener control total sobre cuándo se activa el dark mode, puedes configurar Tailwind para usar la estrategia de clases. Esto requiere añadir configuración en tu archivo CSS:
@import "tailwindcss";
@config "./tailwind.config.js";
Y en tu configuración de Tailwind:
// tailwind.config.js
module.exports = {
darkMode: 'class',
// resto de configuración
}
Con esta configuración, el dark mode se activará únicamente cuando exista la clase dark en el elemento html o en un elemento padre:
<!-- Dark mode activado -->
<html class="dark">
<body>
<div class="bg-white dark:bg-gray-900">
<!-- Este div tendrá fondo oscuro -->
</div>
</body>
</html>
Implementación con JavaScript
Para crear un toggle de dark mode funcional, necesitas JavaScript que añada o quite la clase dark:
// Función para alternar dark mode
function toggleDarkMode() {
document.documentElement.classList.toggle('dark');
// Guardar preferencia en localStorage
const isDark = document.documentElement.classList.contains('dark');
localStorage.setItem('darkMode', isDark);
}
// Cargar preferencia guardada al iniciar
document.addEventListener('DOMContentLoaded', function() {
const savedMode = localStorage.getItem('darkMode');
if (savedMode === 'true') {
document.documentElement.classList.add('dark');
}
});
Componente toggle completo
Aquí tienes un ejemplo completo de un botón toggle para dark mode:
<button
onclick="toggleDarkMode()"
class="
p-2 rounded-lg
bg-gray-200 dark:bg-gray-700
hover:bg-gray-300 dark:hover:bg-gray-600
text-gray-800 dark:text-gray-200
transition-all duration-200
"
aria-label="Toggle dark mode"
>
<!-- Icono sol (visible en dark mode) -->
<svg class="w-5 h-5 hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 2L13.09 8.26L20 9L14 14.74L15.18 21.02L10 17.77L4.82 21.02L6 14.74L0 9L6.91 8.26L10 2Z"/>
</svg>
<!-- Icono luna (visible en light mode) -->
<svg class="w-5 h-5 block dark:hidden" fill="currentColor" viewBox="0 0 20 20">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/>
</svg>
</button>
Patrones comunes para dark mode
Estos son algunos patrones frecuentes que deberías aplicar en tus diseños:
- Fondos principales:
bg-white dark:bg-gray-900 - Fondos secundarios:
bg-gray-50 dark:bg-gray-800 - Texto principal:
text-gray-900 dark:text-gray-100 - Texto secundario:
text-gray-600 dark:text-gray-400 - Bordes:
border-gray-200 dark:border-gray-700 - Sombras:
shadow-lg dark:shadow-gray-900/25
Ejemplo práctico: Card adaptativa
<div class="
max-w-md mx-auto
bg-white dark:bg-gray-800
rounded-lg shadow-lg dark:shadow-gray-900/25
border border-gray-200 dark:border-gray-700
overflow-hidden
">
<div class="p-6">
<h3 class="
text-lg font-semibold
text-gray-900 dark:text-gray-100
mb-2
">
Card adaptativa
</h3>
<p class="
text-gray-600 dark:text-gray-400
mb-4
">
Esta card se adapta automáticamente al modo oscuro,
manteniendo la legibilidad y el contraste adecuado.
</p>
<button class="
bg-blue-500 hover:bg-blue-600
dark:bg-blue-600 dark:hover:bg-blue-700
text-white font-medium
px-4 py-2 rounded
transition-colors duration-200
">
Acción
</button>
</div>
</div>
Consideraciones de accesibilidad
Al implementar dark mode, asegúrate de mantener suficiente contraste en ambos temas. Utiliza herramientas de verificación de contraste y prueba tu interfaz en diferentes condiciones de iluminación. Las transiciones suaves entre modos mejoran la experiencia del usuario:
<div class="transition-colors duration-300 ease-in-out">
<!-- Contenido con transición suave -->
</div>
Fuentes y referencias
Documentación oficial y recursos externos para profundizar en TailwindCSS
Documentación oficial de TailwindCSS
Alan Sastre
Ingeniero de Software y formador, CEO en CertiDevs
Ingeniero de software especializado en Full Stack y en Inteligencia Artificial. Como CEO de CertiDevs, TailwindCSS es una de sus áreas de expertise. Con más de 15 años programando, 6K seguidores en LinkedIn y experiencia como formador, Alan se dedica a crear contenido educativo de calidad para desarrolladores de todos los niveles.
Más tutoriales de TailwindCSS
Explora más contenido relacionado con TailwindCSS y continúa aprendiendo con nuestros tutoriales gratuitos.
Aprendizajes de esta lección
- Comprender el funcionamiento básico del dark mode en Tailwind CSS mediante media queries.
- Aprender a usar el prefijo
dark:para aplicar estilos adaptativos. - Configurar el dark mode manualmente mediante la estrategia de clases.
- Implementar un toggle funcional de dark mode con JavaScript.
- Aplicar patrones comunes y buenas prácticas para mantener accesibilidad y contraste adecuado.