Dark Mode: Implementando el Tema Oscuro en Tu Sitio con CSS y JavaScript

El Dark Mode (Modo Oscuro) se ha convertido en una tendencia popular en el diseño de interfaces de usuario. Es una opción de diseño que altera el esquema de colores de una interfaz a un esquema más oscuro. Muchos usuarios prefieren el modo oscuro porque puede ser más suave para los ojos, especialmente en ambientes con poca luz.

En este artículo, mostraremos cómo implementar el Dark Mode en tu sitio usando CSS y JavaScript.

Beneficios del Dark Mode

1. Ahorro de Energía: En dispositivos con pantallas OLED, el modo oscuro puede ahorrar energía.
2. Reducción de la Fatiga Visual: Puede ser más cómodo para la lectura en ambientes con poca luz.
3. Estética: Proporciona una apariencia moderna y elegante.

Implementando Dark Mode con CSS

Podemos usar variables CSS para definir colores que pueden ser fácilmente alternados entre los modos claro y oscuro.

:root {
  --background-color-light: #ffffff;
  --background-color-dark: #000000;
  --text-color-light: #000000;
  --text-color-dark: #ffffff;
}

body.dark-mode {
  background-color: var(--background-color-dark);
  color: var(--text-color-dark);
}

body.light-mode {
  background-color: var(--background-color-light);
  color: var(--text-color-light);
}

Agregando JavaScript para Alternar Entre Modos

Podemos agregar un botón que permitirá a los usuarios alternar entre los modos claro y oscuro.

<button id="toggle-dark-mode">Toggle Dark Mode</button>

Ahora, vamos a usar JavaScript para alternar las clases del cuerpo.

document
  .getElementById('toggle-dark-mode')
  .addEventListener('click', function () {
    document.body.classList.toggle('dark-mode');
    document.body.classList.toggle('light-mode');
  });

Consideraciones de Accesibilidad

Al implementar el Dark Mode, es esencial garantizar que el contraste entre el texto y el fondo sea suficiente para mantener la legibilidad. Herramientas como Color Contrast Checker pueden ayudar.

Probando en Diferentes Dispositivos

Asegúrate de probar la implementación en diferentes dispositivos y navegadores para garantizar una experiencia de usuario consistente.

Aspectos Adicionales de la Implementación del Dark Mode

Utilizando Preferencias del Sistema

Es posible llevar la experiencia del usuario a un nivel superior, identificando y aplicando automáticamente las preferencias de color del sistema del usuario. Con la consulta de medios prefers-color-scheme, puedes definir estilos diferentes para los modos claro y oscuro, de acuerdo con las configuraciones del sistema del usuario.

@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--background-color-dark);
    color: var(--text-color-dark);
  }
}

Persistiendo la Elección del Usuario

Para una experiencia más fluida, considera almacenar la preferencia de tema del usuario en una cookie o en localStorage. Esto permitirá que el sitio recuerde la elección del usuario en la próxima visita.

const userPrefersDarkMode = localStorage.getItem('dark-mode') === 'true';

if (userPrefersDarkMode) {
  document.body.classList.add('dark-mode');
} else {
  document.body.classList.add('light-mode');
}

document
  .getElementById('toggle-dark-mode')
  .addEventListener('click', function () {
    const darkModeEnabled = document.body.classList.toggle('dark-mode');
    localStorage.setItem('dark-mode', darkModeEnabled);
  });

Considerando el Diseño de Imágenes y Componentes

Al implementar el Dark Mode, es importante ajustar no solo los colores del texto y del fondo, sino también considerar la apariencia de imágenes, íconos y otros componentes de la UI. Algunas imágenes y componentes pueden necesitar variaciones específicas para los modos claro y oscuro para mantener la armonía visual.

Conclusión

El Dark Mode se ha convertido en una parte esencial del diseño moderno de la web, ofreciendo beneficios tanto estéticos como funcionales. Su implementación no solo aumenta la accesibilidad y el confort visual, sino que también refleja un cuidado con las preferencias y necesidades de los usuarios.

Con las técnicas presentadas en este artículo, esperamos que estés inspirado para experimentar e incorporar el Dark Mode en tus proyectos web. Los detalles adicionales aquí proporcionados pueden ayudarte a crear una experiencia aún más rica y personalizada.

Continúa explorando e innovando, y nunca dejes de mejorar la experiencia del usuario en tus creaciones. Después de todo, la web es un ambiente en constante evolución, y la adaptación a las tendencias y tecnologías emergentes es lo que mantiene tu trabajo relevante y atractivo.

¿Interesado en otras técnicas de diseño y desarrollo? Consulta nuestro post sobre Animando SVG con CSS: Dando Vida a los Gráficos Vectoriales.

¡Hasta la próxima, HaWkers!

¡Vamos a por ello! 🦅