Skip to main content
Se agrega una breve explicación al código.
Origen Enlace

main.js:

function changeLogo(element) {
    if(element.getAttribute("theme") == "light"){
        element.setAttribute("theme", "dark");
        document.getElementById('logo').src = "../img/logo_dark.svg";
    }else{
        element.setAttribute("theme", "light");
        document.getElementById('logo').src = "../img/logo.svg";
    }
    
}
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:

<input class="btn-toggle" type="checkbox" onclick="changeLogo(this)" theme="dark">
<!-- agregamos un atributo el cual nos permitirá saber el color actual -->
<input class="btn-toggle" type="checkbox" onclick="changeLogo(this)" theme="dark">

main.js:

function changeLogo(element) {
    if(element.getAttribute("theme") == "light"){
        element.setAttribute("theme", "dark");
        document.getElementById('logo').src = "../img/logo_dark.svg";
    }else{
        element.setAttribute("theme", "light");
        document.getElementById('logo').src = "../img/logo.svg";
    }
    
}

html:

<input class="btn-toggle" type="checkbox" onclick="changeLogo(this)" theme="dark">

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">
Origen Enlace

main.js:

function changeLogo(element) {
    if(element.getAttribute("theme") == "light"){
        element.setAttribute("theme", "dark");
        document.getElementById('logo').src = "../img/logo_dark.svg";
    }else{
        element.setAttribute("theme", "light");
        document.getElementById('logo').src = "../img/logo.svg";
    }
    
}

html:

<input class="btn-toggle" type="checkbox" onclick="changeLogo(this)" theme="dark">