I created a button that switches the entire page to dark mode.
I also have some dark buttons that I want to switch to light when the dark mode button is clicked.
The issue is that while changing the page to dark mode works, the dark buttons only toggle once, and the second click does not work for the first time.
Below is the code I have written:
Thank you.
let darkBackground = document.querySelector('body');
let darkModeBtn = document.getElementById('darkModeBtn');
let btnIcon = document.getElementById('btnIcon');
let codeButton = document.getElementsByClassName('btn-dark');
darkModeBtn.addEventListener('click', function() {
darkBackground.classList.toggle('darkbackground');
btnIcon.classList.toggle('fa-sun');
btnIcon.classList.toggle('fa-moon');
for (var i = 0, len = codeButton.length; len > i; i++) {
codeButton[i].classList.toggle('btn-light');
codeButton[i].classList.toggle('btn-dark');
};
});.darkbackground {
background-color: rgb(46, 45, 49);
transition: .15s;
color: white;
}
.darkmodebtn {
font-size: 1.50rem;
padding: 0.5rem 0.85rem;
background-color: rgba(47, 128, 237, 1);
outline: none;
border: 0;
border-radius: 20px;
color: white;
position: fixed;
bottom: 18px;
right: 18px;
}
.darkmodebtn:focus {
outline: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="36545959424542445746760218031805">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<a href="#" class="btn btn-dark">Light and Black</a>
<a href="#" class="btn btn-dark">Light and Black</a>
<a href="#" class="btn btn-dark">Light and Black</a>
<button class="darkmodebtn" id="darkModeBtn"><i id="btnIcon" class="fas fa-moon"></i></button>
</body>
</html>