I'm new to this language. So far I've only dealt with HTML and CSS. That's why I looked up a tutorial. I took the code and tried to change it. It worked for the beginning, but when I tried to add divs in dark mode, it didn't work.
So my problem is that the divs are not included in the dark mode, and the font, font-color etc. I thought by adding div instead of body, it would work. But this was not the case...
I hope you can help me with that.
const body = document.querySelector('body');
const div = document.querySelector('div');
const toggle = document.getElementById('toggle');
toggle.onclick = function() {
toggle.classList.toggle('active');
body.classList.toggle('active');
div.classList.toggle('active')
}body {
background-image: radial-gradient(#ada9a9 2%, transparent 7%), radial-gradient(#928f8f 2%, transparent 7%);
background-color: #f8efd6;
background-position: 25px 35px, 50px 50px;
background-size: 20px 20px;
transition: 0.5s;
}
body.active {
background-image: radial-gradient(#5c5252 2%, transparent 7%), radial-gradient(#928f8f 2%, transparent 7%);
background-color: #16140f;
background-position: 25px 35px, 50px 50px;
background-size: 20px 20px;
}
#toggle {
position: relative;
display: block;
width: 100%;
height: 40px;
border-radius: 160px;
background: #fff;
transition: 0.5s;
cursor: pointer;
box-shadow: inset 0 2px 60px rgba(0, 0, 0, 0.1), inset 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 -4px 4px rgba(0, 0, 0, 0.05);
}
#toggle.active {
background-color: #222;
box-shadow: inset 0 8px 60px rgba(0, 0, 0, 0.1), inset 0 8px 8px rgb(0, 0, 0, 0.1), inset 0 -4px 4px rgb(0, 0, 0, 0.1);
}
#toggle .indicator {
position: absolute;
top: 0;
left: 0;
width: 40%;
height: 40px;
background: linear-gradient(to bottom, #eaeaea, #f9f9f9);
border-radius: 50%;
transform: scale(0.9);
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), inset 0 4px 4px rgba(255, 255, 255, 1), inset 0 -4px 4px rgba(255, 255, 255, 1);
transition: 0.5s;
}
#toggle.active .indicator {
left: 60%;
background: linear-gradient(to bottom, #444, #222);
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), inset 0 4px 4px rgba(255, 255, 255, 0.2), inset 0 -4px 4px rgba(255, 255, 255, 0.2);
transition: 0.5s;
}
div.active {
background-color: rgb(31, 31, 31);
}<div class="power">
<div id="toggle">
<i class="indicator"></i>
</div>
</div>