0

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!

2
  • 1
    Usa localStorage para almacenar esa información en el navegador del visitante. Léete la información del enlace e intenta aplicarla, y si no lo consigues recuerda que puedes editar tu pregunta con lo que has intentado y miramos de ayudarte sobre el error que tengas. Repasa Cómo preguntar, recorrido de bienvenida y ejemplo mínimo verificable para aprender el funcionamiento básico de este sitio, gracias.
    – masterguru
    Commented el 28 nov. 2022 a las 8:03
  • 1
    Además de lo que te ha comentado masterguru, otra opción que tienes es la de usar la media query 'prefers-color-scheme', que detecta el modo de color del sistema del usuario y te permite mostrar unos estilos u otros en función de ello. La ventaja es que siempre se va a ajustar a las preferencias de quien visite la web y además no requiere Javascript, pero por contra el usuario no podrá elegir mediante un selector cambiar de modo de color. Tienes más información aquí: dev.to/whitep4nth3r/…
    – o1dskoo1
    Commented el 28 nov. 2022 a las 12:37

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.