I’m new to this language. So far I’ve only dealt with html and css. Thats why i looked up a Totourial. 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.
<div class="power">
<div id="toggle">
<i class="indicator"></i>
</div>
<script>
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')
}
</script>
</div>
CSS:
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);
}