I need to change the background color at the same time as changing the image by clicking on the button. Darkening the background works completely, but how do I change the background by clicking on the button? I was looking for it, but it didn’t work out, please help me.
document.getElementById('hide-checkbox').addEventListener('click', function() {
const currentTheme = document.body.className;
if (currentTheme === 'light-theme') {
document.body.className = 'dark-theme';
localStorage.setItem('theme', 'css/Style.css');
} else {
document.body.className = 'light-theme';
localStorage.setItem('theme', 'css/Style.css');
}
});
body {
margin: 0;
font-family: Arial, sans-serif;
background-image: url("https://sun9-66.userapi.com/impg/U_B0e4HYLxsYNJIxFpYW6jR12JhDy76x2zhkXw/O4OafXIrfLc.jpg?size=2560x1920&quality=95&sign=c9143650a2af6853e49e25e18475c8f4&type=album");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
<div class="image">
<input type="checkbox" id="hide-checkbox">
<label for="hide-checkbox" class="toggle">
<span class="toggle-button">
<span class="crater crater-1"></span>
<span class="crater crater-2"></span>
<span class="crater crater-3"></span>
<span class="crater crater-4"></span>
<span class="crater crater-5"></span>
<span class="crater crater-6"></span>
<span class="crater crater-7"></span>
</span>
<span class="star star-1"></span>
<span class="star star-2"></span>
<span class="star star-3"></span>
<span class="star star-4"></span>
<span class="star star-5"></span>
<span class="star star-6"></span>
<span class="star star-7"></span>
<span class="star star-8"></span>
</label>
</div>
2
Answers
I think you need
body.classList.add('someClass')
andbody.classList.remove('someClass')
Answering for a SO tutorial, so please be polite with me 🙂
Here is the full code. Change background urls and try…