Cómo hacer un tema oscuro en tu sitio con JavaScript

Introducción

En la actualidad, los temas oscuros se han vuelto muy populares en los sitios web y aplicaciones móviles. No solo ofrecen una experiencia visual agradable, sino que también pueden ayudar a reducir la fatiga ocular en ambientes de poca luz.

En este artículo, aprenderás cómo implementar un tema oscuro en tu sitio web utilizando JavaScript. También veremos cómo permitir que los usuarios cambien entre el modo oscuro y el modo claro.

Por qué deberías ofrecer un tema oscuro

Como mencionamos anteriormente, los temas oscuros pueden ayudar a reducir la fatiga ocular, especialmente en entornos de baja luz. También pueden ser un agregado estético atractivo para tu sitio.

Además, muchos usuarios prefieren los temas oscuros para navegar por la web en dispositivos móviles, ya que pueden ahorrarle batería a la pantalla.

Implementación de un tema oscuro con JavaScript

Para implementar un tema oscuro en tu sitio web, lo primero que debes hacer es agregar una clase a tus elementos en HTML que correspondan al tema oscuro. Esto es importante para que pueda diferenciarlos y aplicar estilos específicos de CSS.

Agrega una clase llamada "dark-mode" al elemento body en tu HTML:

  <body class="dark-mode">
    ...
  </body>

Luego, agrega los estilos correspondientes en tu archivo CSS para la clase "dark-mode". Aquí, te mostramos un ejemplo:

  .dark-mode {
    background-color: #222;
    color: #fff;
  }

Este es solo un ejemplo básico. En realidad, deberías aplicar estilos específicos para cada uno de los elementos en tu sitio web para que tenga un aspecto uniforme y coherente. Asegúrate de que las combinaciones de colores sean agradables a la vista y no hagan que sea difícil leer el contenido.

Permitir que los usuarios cambien entre el modo oscuro y el modo claro

Para ofrecer una opción a los usuarios de cambiar entre el modo oscuro y el claro, necesitas agregar un botón que desencadene el cambio. Puedes crear un botón HTML y agregarle un evento onclick para cambiar la clase del elemento body a "dark-mode" o eliminarla si ya está presente.

Primero, agrega un botón HTML a tu página:

  <button id="change-theme">Cambiar tema</button>

Luego, agrega el script de JavaScript siguiente:

  const btn = document.querySelector('#change-theme');
  const body = document.querySelector('body');

  btn.addEventListener('click', function() {
    if (body.classList.contains('dark-mode')) {
      body.classList.remove('dark-mode');
    } else {
      body.classList.add('dark-mode');
    }
  });

La función addEventListener se ejecutará cada vez que el usuario haga clic en el botón change-theme. El if statement comprueba si la clase "dark-mode" ya está presente en el elemento body. Si es así, se elimina. Si no, se agrega.

Con este sencillo script, los usuarios ahora pueden cambiar fácilmente entre el modo claro y oscuro en tu sitio web.

Conclusión

En resumen, los temas oscuros no solo son estéticamente atractivos, sino que también pueden ser beneficiosos para la salud ocular de tus usuarios. Al implementar un tema oscuro en tu sitio web con JavaScript, estás ofreciendo a tus usuarios una experiencia de navegación más agradable. Además, permitirles cambiar entre el modo claro y oscuro te brinda la oportunidad de personalizar su experiencia según sus preferencias.