I'm trying to use a custom slider with an input type=checkbox to toggle between dark-mode and light-mode. It is not working with the javascript code I have.
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() will remove and add one single class. Try it this way instead
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 won't remove different the classes, you have to add and remove, please check the working code below.
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>Maybe this one?
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>