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;
}
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. 👌
