Skip to main content
se añadieron 48 caracteres en el cuerpo
Origen Enlace

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.

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 maneraPorfavor soy nuevo en este mundo y su ayuda seria de mejorar mi codigo o aplicar el modegran utilidad de otra maneraverdad y muy agradecido.

Comparto mi codigo Si alguien puede apoyarme seria muy agradecido de verdad. Buenas noches!

Comparto mi codigo.

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.

Comparto mi codigo.

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.

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!

Origen Enlace

Problema con dark/light mode

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.

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)
}

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.

Comparto mi codigo.