Implementar Darkmode - Oxygenados La comunidad

El Modo oscuro, conocido por todos como Darkmode, puede acarrear mucho trabajo en diseño y programación, tando de HTML, CSS y/o JavaScript; pero recurriendo a San Github, tendremos el trabajo hecho al 99'99% y añadiendo unas cuantas líneas de código en los paneles de HTML y JS de un elemento Code Block lo tendremos implementado con una facilidad que roza lo ridículo.

Hemos dicho en la presentación que habría que recurrir a Github, pero aquí vamos a ofrecer el código y las instrucciones para que ni siquiera tengas que ir allí, a no ser que quieras profundizar mas en el código, el enlace está disponible al final de esta guía.

Primer Paso - Añadir Código

Añadimos un elemento Code Block a nuestro sitio y, si queremos que esta funcionalidad esté disponible en todas nuestras páginas tendremos que hacerlo en nuestra plantilla principal, esa en la que tenemos definidos la cabecera y el pie de página (Header y Footer).
En el panel correspondiente al código HTML añadimos el código que está justamente debajo de este texto.

Ahora en el panel de código JavaScript se pega el código siguiente:

  function addDarkmodeWidget() {
    new Darkmode().showWidget();
  }
  window.addEventListener('load', addDarkmodeWidget);

Ya está la forma básica implementada en la página, pero hay unas opciones que se pueden cambiar para personalizar el botón.

Segundo Paso - Personalizar (Opcional)

En el mismo panel de JavaScript anterior y al final del código anterior se añade el código de abajo.

const options = {
  bottom: '64px', // default: '32px'
  right: 'unset', // default: '32px'
  left: '32px', // default: 'unset'
  time: '0.5s', // default: '0.3s'
  mixColor: '#fff', // default: '#fff'
  backgroundColor: '#fff',  // default: '#fff'
  buttonColorDark: '#100f2c',  // default: '#100f2c'
  buttonColorLight: '#fff', // default: '#fff'
  saveInCookies: false, // default: true,
  label: '🌓', // default: ''
  autoMatchOsTheme: true // default: true
}

const darkmode = new Darkmode(options);
darkmode.showWidget();

Vemos que al final de cada línea de código y después del doble / nos indica los valores por defecto, estos valores se pueden cambiar según nuestro gusto y/o necesidad, y hacen referencia a la visualización, posición y forma del botón.

✅ Es posible que el botón al hacer scroll se quede tapado por algún elemento tal como un div o una imagen, esto se soluciona añadiendo en el panel de CSS del mismo Code Block este código, y en el supuesto caso de que aun así sigua tapándose cambiaremos el 500 por un número superior:

.darkmode-layer, .darkmode-toggle {
  z-index: 500;
}

Enlace a Github

Mas Info de otras opciones

Como siempre esperamos tus comentarios y por supuesto si tienes alguna duda o necesitas ayuda puedes contactar por nuestro grupo de Telegram o dejando un comentario.

Nos vemos en la próxima. 👌