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