Buenas estoy pasando por lo siguiente, estoy implementado el dark/light mode a mi sitio. Pero al cambiar a otro html de mi web se quita el mode que he elegido.
Y tambien me gustaria saber si hay otra manera de mejorar mi codigo o aplicar el mode de otra manera.
Porfavor soy nuevo en este mundo y su ayuda seria de gran utilidad de verdad y muy agradecido. Si alguien puede apoyarme seria muy agradecido de verdad. Buenas noches!
Comparto mi codigo.
HTML
<div class="one-quarter">
<input class="container_toggle checkbox" type="checkbox" id="switch" name="mode">
<label for="switch" class="label">
<i class="fas fa-moon"></i>
<i class="fas fa-sun"></i>
<div class="ball"></div>
</label>
</div>
CSS
.checkbox {
opacity: 0;
position: absolute; }
.label {
background-color: #18191a;
border-radius: 7px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px;
position: relative;
height: 22px;
width: 56px;
transform: scale(1.5); }
.label .ball {
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 3.5px;
height: 14px;
width: 14px;
transform: translateX(0px);
transition: transform 0.2s linear;}
.checkbox:checked+.label .ball {
transform: translateX(34px);}
.fa-moon {
color: #f1c40f;
font-size: 10px;}
.fa-sun {
color: #f39c12;
font-size: 10px;}
html[data-theme='dark'] {
.home {
background-color: $toggle-color;
}
.home .titulo .contenedor__titulo .contenido__titulo h2 {
color: $sidebar-color;
}
.home .titulo .contenedor__titulo .contenido__titulo p {
color: $paragraphcolor;
}
.home .clase1 .title__clase1 h2 {
color: $sidebar-color;
}
.home .clase1 .contenido__clase1 .cont__clase1 h2 {
color: $sidebar-color;
}
.home .clase1 .contenido__clase1 .lista {
color: $primary-color;
}
.home .clase1 .contenido__clase1 .cont__clase1 .parrafos {
color: $primary-color;
}
.home .clase1 .contenido__clase1 .separadores {
color: $sidebar-color;
}
}
input[type=checkbox] {
height: 0;
width: 0;
visibility: hidden;}
input:checked+label {
background-color: #18191a;}
input:checked+label:after {
left: calc(100% - 5px);
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);}
JAVASCRIPT
const checkbox = document.querySelector('input[name=mode]');
checkbox.addEventListener('change', function () {
if (this.checked) {
trans()
document.documentElement.setAttribute('data-theme', 'dark')
} else {
trans()
document.documentElement.setAttribute('data-theme', 'light')
}
})
let trans = () => {
document.documentElement.classList.add('transition');
window.setTimeout(() => {
document.documentElement.classList.remove('transition');
}, 1000)
}
Porfavor soy nuevo en este mundo y su ayuda seria de gran utilidad de verdad y muy agradecido. Si alguien puede apoyarme seria muy agradecido de verdad. Buenas noches!