0

Como puedo cambiar de logo en el mismo instante que active o desactive el modo oscuro?. He intentado esto con Js pero la verdad estoy perdido. Agradecería una ayuda con esto. hice estas funciones para actualizar las rutas del logo: main.js:

 function dark () {
    document.getElementById('logo').src = "../img/logo_dark.svg";// aquí actualizo la ruta para traer el logo que usare en modo oscuro
   }
   function light () {
    document.getElementById('logo').src = "../img/logo.svg"; // aquí actualizo la ruta para traer el logo que usare en modo claro
   }

html:

<input class="btn-toggle" type="checkbox" onclick="dark(),light()">// aquí llamo a las funciones

1 respuesta 1

1

main.js:

function changeLogo(element) {

    // Si el atributo es light
    if(element.getAttribute("theme") == "light"){
        // Cambiamos el atributo theme del botón por dark y cambiamos el logo
        element.setAttribute("theme", "dark");
        document.getElementById('logo').src = "../img/logo_dark.svg"; 
    }else{
        // En caso de ser dark lo cambiamos por light
        element.setAttribute("theme", "light");
        document.getElementById('logo').src = "../img/logo.svg";
    }        
}

html:

<!-- agregamos un atributo el cual nos permitirá saber el color actual -->
<input class="btn-toggle" type="checkbox" onclick="changeLogo(this)" theme="dark">
2
  • Tu código funciona bien pero, es importante que esplique sus funciones en lo mínimo posible. Esto es para que otras personas que tienen el mismo problema o busquen algo similar pueda entender el funcionamiento y hacer uso de ello y tal vez tú ganes más reputación. Te invito a que leas Cómo responder y sepáis ayudar Commented el 19 dic. 2021 a las 13:18
  • Hola, si tienes razón. pero no entiendo porque en mi proyecto no me estaba sirviendo, en un documento en blanco funciona. Al final por tiempo me toco resolverlo agregándole clases al SVG y usando variables en CSS. El script que hiciste me sirvió para cambiar los iconos, solamente cree otra función para que los mostrara al cargar la pagina. Gracias!
    – noob2021
    Commented el 28 dic. 2021 a las 11:06

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.