Implementación del modo oscuro: una guía completa con CSS y JavaScript

El modo oscuro se ha vuelto cada vez más popular, ofreciendo una experiencia de visualización más cómoda, especialmente en entornos con poca luz. Esta guía proporciona una descripción completa de cómo implementar el modo oscuro en su sitio web utilizando CSS y JavaScript, garantizando una experiencia de usuario fluida y accesible para una audiencia global.

¿Por qué implementar el modo oscuro?

Hay varias razones de peso para considerar la implementación del modo oscuro:

Experiencia de usuario mejorada: Muchos usuarios encuentran el modo oscuro más agradable a la vista, reduciendo la fatiga visual, especialmente al navegar de noche o en entornos con poca luz. Esto se adapta a una audiencia global con diferentes hábitos de uso de pantalla y condiciones de iluminación.
Accesibilidad: El modo oscuro puede mejorar la accesibilidad para usuarios con discapacidades visuales o sensibilidad a la luz. Al proporcionar una opción de alto contraste, hace que su sitio web sea más inclusivo.
Duración de la batería: En dispositivos con pantallas OLED o AMOLED, el modo oscuro puede reducir el consumo de energía, prolongando la duración de la batería. Esto es particularmente relevante para los usuarios móviles en áreas con acceso limitado a la infraestructura de carga.
Tendencia de diseño moderno: El modo oscuro es una tendencia de diseño popular, y su implementación puede hacer que su sitio web se vea más moderno y atractivo. Esto mejora la percepción de la marca y la participación del usuario.

Métodos para implementar el modo oscuro

Existen varios enfoques para implementar el modo oscuro, cada uno con sus propias ventajas y desventajas. Exploraremos los métodos más comunes:

Consultas de medios de CSS (prefers-color-scheme): Este método detecta automáticamente el esquema de color preferido del usuario basándose en la configuración de su sistema operativo.
Conmutador con JavaScript: Este método proporciona un interruptor manual (por ejemplo, un switch o un botón) que permite a los usuarios cambiar entre el modo claro y el oscuro.
Combinación de consultas de medios y JavaScript: Este enfoque combina los beneficios de ambos métodos, proporcionando una detección automática y al mismo tiempo permitiendo a los usuarios anular la preferencia del sistema.

1. Implementación del modo oscuro con consultas de medios de CSS

La consulta de medios de CSS prefers-color-scheme le permite detectar el esquema de color preferido del usuario y aplicar diferentes estilos en consecuencia. Esta es la forma más directa y eficiente de implementar el modo oscuro para los usuarios que ya han configurado las preferencias de su sistema.

Ejemplo de código

Añada el siguiente CSS a su hoja de estilos:

/* Tema por defecto (Claro) */
body {
  background-color: #fff;
  color: #000;
}

/* Tema Oscuro */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
    color: #fff;
  }
  /* Ajuste otros elementos según sea necesario */
  h1, h2, h3 {
    color: #ddd;
  }
  a {
    color: #8ab4f8;
  }
}

Explicación:

El primer bloque de CSS define los estilos del tema por defecto (claro).
El bloque @media (prefers-color-scheme: dark) aplica estilos solo cuando el sistema del usuario está configurado en modo oscuro.
Dentro del bloque @media, puede definir los estilos del modo oscuro para varios elementos, como el fondo del cuerpo y el color del texto, los encabezados y los enlaces.

Ventajas

Detección automática: El navegador detecta automáticamente la preferencia del usuario, proporcionando una experiencia fluida.
Implementación sencilla: Este método requiere un código mínimo y es fácil de implementar.
Rendimiento: Las consultas de medios de CSS son gestionadas de manera eficiente por el navegador.

Desventajas

Control limitado: Los usuarios no pueden cambiar manualmente entre el modo claro y oscuro dentro de su sitio web.
Dependencia de la configuración del sistema: La apariencia depende completamente de la configuración del sistema del usuario, de la cual puede que no sea consciente o no pueda cambiar.

2. Implementación del modo oscuro con un conmutador de JavaScript

Usar un conmutador de JavaScript proporciona a los usuarios un interruptor manual para controlar el tema del sitio web. Esto da a los usuarios más control y les permite anular las preferencias de su sistema. Este enfoque es fundamental para atender a usuarios en diversos dispositivos y plataformas que pueden no soportar o exponer de manera consistente la configuración del modo oscuro en todo el sistema.

Estructura HTML

Primero, agregue un elemento de conmutador a su HTML:

<label class="switch">
  <input type="checkbox" id="darkModeToggle">
  <span class="slider round"></span>
</label>

Esto crea un interruptor de palanca simple usando una casilla de verificación y algo de estilo CSS personalizado.

Estilos CSS (Opcional)

Puede dar estilo al interruptor de palanca usando CSS. Aquí hay un ejemplo:

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Deslizadores redondeados */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

Código JavaScript

Ahora, agregue el siguiente código JavaScript para manejar la funcionalidad del conmutador:

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// Función para cambiar al modo oscuro
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Almacenar la preferencia del usuario en localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Comprobar en localStorage la preferencia guardada
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Añadir un detector de eventos al conmutador
darkModeToggle.addEventListener('change', toggleDarkMode);

Explicación:

El código recupera el elemento del conmutador y el elemento body.
La función toggleDarkMode alterna la clase dark-mode en el elemento body.
El código utiliza localStorage para almacenar la preferencia del usuario, por lo que persiste entre sesiones.
El código comprueba localStorage al cargar la página para aplicar la preferencia guardada.
Se añade un detector de eventos al conmutador, de modo que la función toggleDarkMode se llama cuando se hace clic en él.

Estilos CSS para el modo oscuro (usando una clase)

Actualice su CSS para usar la clase dark-mode para aplicar los estilos del tema oscuro:

/* Tema por defecto (Claro) */
body {
  background-color: #fff;
  color: #000;
}

/* Tema Oscuro */
body.dark-mode {
  background-color: #222;
  color: #fff;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 {
  color: #ddd;
}

body.dark-mode a {
  color: #8ab4f8;
}

Ventajas

Control del usuario: Los usuarios pueden cambiar manualmente entre el modo claro y oscuro dentro de su sitio web.
Persistencia: La preferencia del usuario se guarda usando localStorage, por lo que persiste entre sesiones.

Desventajas

Implementación más compleja: Este método requiere más código que usar solo las consultas de medios de CSS.
Dependencia de JavaScript: La funcionalidad del conmutador depende de que JavaScript esté habilitado en el navegador del usuario.

3. Combinación de consultas de medios y JavaScript

El mejor enfoque suele ser combinar las consultas de medios de CSS y un conmutador de JavaScript. Esto proporciona lo mejor de ambos mundos: detección automática del esquema de color preferido del usuario, al tiempo que permite a los usuarios anular manualmente la preferencia del sistema. Esto se adapta a una audiencia más amplia, incluidos aquellos que podrían no ser conscientes o no poder cambiar la configuración del tema de su sistema.

Ejemplo de código

Use el mismo HTML y CSS del ejemplo del conmutador de JavaScript. Modifique el JavaScript para comprobar la preferencia del sistema:

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// Función para cambiar al modo oscuro
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Almacenar la preferencia del usuario en localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Comprobar en localStorage la preferencia guardada, luego la preferencia del sistema
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Añadir un detector de eventos al conmutador
darkModeToggle.addEventListener('change', toggleDarkMode);

Explicación:

El código primero comprueba en localStorage si hay una preferencia guardada.
Si no se encuentra ninguna preferencia en localStorage, comprueba si el sistema del usuario prefiere el modo oscuro usando window.matchMedia.
Si el sistema prefiere el modo oscuro, se añade la clase dark-mode al cuerpo y se marca el conmutador.

Ventajas

Detección automática y control del usuario: Proporciona tanto detección automática como control manual.
Persistencia: La preferencia del usuario se guarda usando localStorage.

Desventajas

Ligeramente más complejo: Este método es un poco más complejo que usar cualquiera de los dos métodos por separado.
Dependencia de JavaScript: Depende de que JavaScript esté habilitado.

Consideraciones de accesibilidad

Al implementar el modo oscuro, es crucial considerar la accesibilidad para garantizar que su sitio web siga siendo utilizable para todos los usuarios. Recuerde que simplemente invertir los colores no garantiza automáticamente la accesibilidad. Aquí hay algunas consideraciones clave:

Contraste de color: Asegúrese de que haya suficiente contraste de color entre el texto y el fondo tanto en el modo claro como en el oscuro. Utilice herramientas como el Comprobador de Contraste de WebAIM (webaim.org/resources/contrastchecker/) para verificar que sus combinaciones de colores cumplen con los estándares de accesibilidad. Esto es especialmente importante para los usuarios con baja visión.
Indicadores de foco: Asegúrese de que los indicadores de foco sean claramente visibles tanto en el modo claro como en el oscuro, para que los usuarios que navegan con un teclado puedan ver fácilmente qué elemento está enfocado actualmente.
Imágenes e iconos: Considere cómo se verán las imágenes y los iconos en modo oscuro. Es posible que necesite proporcionar versiones alternativas o usar filtros CSS para ajustar sus colores para una visibilidad óptima.
Pruebas con usuarios: Pruebe su implementación del modo oscuro con usuarios con diferentes discapacidades visuales para identificar y solucionar cualquier problema de accesibilidad.

Mejores prácticas para la implementación del modo oscuro

Aquí hay algunas mejores prácticas a seguir al implementar el modo oscuro en su sitio web:

Use variables de CSS (Propiedades personalizadas): Las variables de CSS le permiten definir colores y otros estilos en una ubicación central, lo que facilita la gestión y actualización de su tema.
Pruebe a fondo: Pruebe su implementación del modo oscuro en diferentes dispositivos y navegadores para garantizar la coherencia.
Proporcione un conmutador claro: Haga que el interruptor de palanca sea fácil de encontrar y usar. Use un icono claro e intuitivo para indicar su función.
Considere las preferencias del usuario: Respete las preferencias del usuario y guárdelas usando localStorage o cookies.
Mantenga la coherencia: Asegúrese de que su implementación del modo oscuro sea coherente en todo su sitio web.

Ejemplo: Variables de CSS para temas

Las variables de CSS facilitan el cambio entre los temas de modo claro y oscuro. Defina las variables en la pseudoclase :root:

:root {
  --bg-color: #fff;
  --text-color: #000;
  --link-color: #007bff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

body.dark-mode {
  --bg-color: #222;
  --text-color: #fff;
  --link-color: #8ab4f8;
}

Ahora, cuando la clase dark-mode se añade al cuerpo, las variables de CSS se actualizan y los estilos se aplican automáticamente.

Conclusión

La implementación del modo oscuro puede mejorar significativamente la experiencia de usuario de su sitio web, mejorar la accesibilidad e incluso ahorrar batería. Siguiendo las técnicas y mejores prácticas descritas en esta guía, puede crear una experiencia de modo oscuro fluida y agradable para sus usuarios en todo el mundo.

Recuerde priorizar la accesibilidad y probar su implementación a fondo para asegurarse de que su sitio web siga siendo utilizable para todos los usuarios, independientemente de sus preferencias o capacidades visuales.

Al implementar el modo oscuro de manera reflexiva, no solo está siguiendo una tendencia, sino que también está creando una experiencia web más inclusiva y fácil de usar para una audiencia global. Esta dedicación a la experiencia del usuario puede beneficiar enormemente el rendimiento y el atractivo general de su sitio web.