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>
Here is the full code. You need to write CSS for changing colors. Change background urls and try...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
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; */
}
body.dark-theme {
background-color: #131313;
color: #dfdfdf;
}
body.light-theme {
background-color: #dfdfdf;
color: #131313;
}
</style>
</head>
<body class="light-theme">
<div class="image">
<input type="checkbox" id="hide-checkbox">
<h1>Theme Demo</h1>
<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>
<script>
document.addEventListener("DOMContentLoaded", () => {
const themeBtn = document.querySelector('#hide-checkbox');
themeBtn.addEventListener('change', (e) => {
if (e.currentTarget.checked) {
document.body.classList.add("dark-theme");
document.body.classList.remove("light-theme");
// document.body.style.backgroundImage = 'url(someurl)';
} else {
// document.body.style.backgroundImage = 'url(anotherurl)';
document.body.classList.add("light-theme");
document.body.classList.remove("dark-theme");
}
});
});
</script>
</body>
</html>