Estoy tratando de usar un control deslizante personalizado con un tipo de entrada = casilla de verificación para alternar entre el modo oscuro y el modo claro. No funciona con el código javascript que tengo.
var checkbox = document.getElementById('checkbox'); checkbox.addEventListener('change', themeChange); function themeChange(){ if (checkbox.checked == true){ document.getElementById('body').classList.toggle('dark-mode'); } else { document.getElementById('body').classList.toggle('light-mode'); } } .dark-mode { background-color: black; color: white; } .light-mode { background-color: white; color: black; } <label class="switch"> <input id="checkbox" type="checkbox" > <span class="slider round"></span> </label> <body id='body'> </body>.toggle() eliminará y agregará una sola clase. Pruébelo de esta manera en su lugar
function themeChange(){ if (checkBox.checked == true){ document.getElementById('body').classList.add('dark-mode'); document.getElementById('body').classList.remove('light-mode'); } else { document.getElementById('body').classList.remove('dark-mode'); document.getElementById('body').classList.add('light-mode'); }toggle no eliminará diferentes clases, debe add y remove , verifique el código de trabajo a continuación.
var checkbox = document.getElementById('checkbox'); checkbox.addEventListener('change', themeChange); function themeChange(){ if (checkbox.checked == true){ document.getElementById('body').classList.add('dark-mode'); document.getElementById('body').classList.remove('light-mode'); } else { document.getElementById('body').classList.add('light-mode'); document.getElementById('body').classList.remove('dark-mode'); } } .dark-mode { background-color: black; color: white; } .light-mode { background-color: white; color: black; } <label class="switch"> <input id="checkbox" type="checkbox" > <span class="slider round"></span> </label> <body id='body'> Theme switcher </body>¿Quizás este?
var checkbox = document.getElementById('checkbox'); checkbox.addEventListener('change', ()=>{ if (checkbox.checked == true){ document.getElementById('body').classList.toggle('dark-mode',true); document.getElementById('body').classList.toggle('light-mode',false); } else { document.getElementById('body').classList.toggle('dark-mode',false); document.getElementById('body').classList.toggle('light-mode',true); } } ) .dark-mode { background-color: black; color: white; } .light-mode { background-color: white; color: black; } <label class="switch"> <input id="checkbox" type="checkbox" > <span class="slider round"></span> </label> <body id='body'> </body>