Implementa un dark mode perfecto que respete las preferencias del sistema y ofrezca control al usuario. Esta guía cubre desde técnicas básicas hasta patrones avanzados para una transición suave entre modos.
Comparativa entre light mode y dark mode en una aplicación web
Contenido del Artículo
Implementación Básica
Usando prefers-color-scheme y variables CSS:
:root {
/* Light theme default */
--bg-primary: #ffffff;
--text-primary: #333333;
--accent: #3498db;
}
@media (prefers-color-scheme: dark) {
:root {
/* Dark theme */
--bg-primary: #121212;
--text-primary: #f5f5f5;
--accent: #1abc9c;
}
}
body {
background: var(--bg-primary);
color: var(--text-primary);
transition: background 0.3s, color 0.3s;
}Usa variables CSS para mantener consistencia y facilitar cambios
Toggle Controlado por Usuario
Permitir cambiar modo independientemente del sistema:
// Almacenar preferencia
function setTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
}
// Cargar preferencia
const savedTheme = localStorage.getItem('theme') ||
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
setTheme(savedTheme);
// Toggle
document.getElementById('theme-toggle').addEventListener('click', () => {
const currentTheme = document.documentElement.getAttribute('data-theme');
setTheme(currentTheme === 'dark' ? 'light' : 'dark');
});
Técnicas Avanzadas
Mejorando la experiencia de dark mode:
Colores adaptativos
Ajustar saturaciones y contrastes
Imágenes
filter: brightness(0.8) para dark mode
SVG/Iconos
currentColor para iconos adaptativos
Transiciones
Suavizar cambios con transition
/* Imágenes adaptativas */
@media (prefers-color-scheme: dark) {
img:not([data-theme-ignore]) {
filter: brightness(0.8) contrast(1.2);
}
}
/* SVG con currentColor */
.icon {
color: var(--icon-color);
}
<svg>
<path fill="currentColor" ... />
</svg>
/* Transiciones suaves */
:root {
--transition-time: 0.4s;
}
body, img {
transition:
background var(--transition-time),
color var(--transition-time),
filter var(--transition-time);
}Accesibilidad y Mejores Prácticas
Criterios esenciales para dark mode de calidad:
/* Verificar contraste */
.text {
color: var(--text-primary);
background: var(--bg-primary);
/* Contraste mínimo 4.5:1 */
}
/* Estilos para modo impresión */
@media print {
:root {
--bg-primary: white !important;
--text-primary: black !important;
}
}| Parámetro | Light Mode | Dark Mode |
|---|---|---|
| Contraste mínimo | 4.5:1 (AA) | 4.5:1 (AA) |
| Brillo texto | #333 a #FFF | #FFF a #121212 |
| Saturación colores | 100% | Reducir 15-20% |
| Contraste profundidad | Sombras oscuras | Luces suaves |
