Soy nuevo en este idioma. Hasta ahora solo he tratado con HTML y CSS. Por eso busqué un tutorial. Tomé el código y traté de cambiarlo. Funcionó al principio, pero cuando traté de agregar div s en modo oscuro, no funcionó. Entonces, mi problema es que los div no están incluidos en el modo oscuro, y la font , font-color la fuente, etc. Pensé que al agregar div en lugar de body , funcionaría. Pero este no fue el caso... Espero que me puedas ayudar con eso.
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>