Estoy creando una aplicación de lista de tareas pendientes para mi cartera. Me gustaría agregar una función de modo oscuro para mi cuerpo/fondo. Sin embargo, mi botón de alternar se ve bien, pero el interruptor no parece funcionar y parece que no puedo entender por qué. ¿Alguien ve algo mal o que pueda estar interfiriendo?
function dark() { // setting up dark-mode var element = document.body; element.classList.toggle("dark-mode"); //dark-mode class } label { margin: 10px; cursor: pointer; width: 50px; height: 30px; display: block; border-radius: 50px; position: relative; color: white; } .switch { position: relative; display: inline-block; width: 110px; height: 10px; margin: 0 10px; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: aqua; transition: .4s; border-radius: 35px; ; } .switch input { display: none } .slider::before { position: absolute; content: ""; height: 20px; width: 20px; left: 5px; bottom: 5px; background-color: white; transition: 0.4s; border-radius: 50px; } input:checked+.slider { background-color: blue; } input:checked+.slider::before { transform: translateX(0px); } input:checked+.slider::after { transform: translateX(8px); } <div class="toggle"> <label for="switch"> <input type="checkbox" onclick="dark()" checked> <span class="slider"></span> </label> </div>Ahora, funciona bien después de hacer algunas modificaciones y agregar algunas propiedades para el modo oscuro. Espero que te guste. Gracias.
function dark() { // setting up dark-mode var element = document.body; element.classList.toggle("dark-mode"); //dark-mode class } label { margin: 10px; cursor: pointer; width: 50px; height: 30px; display: block; border-radius: 50px; position: relative; color: white; } .switch { position: relative; display: inline-block; width: 50px; height: 30px; margin: 0 10px; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: aqua; transition: .4s; border-radius: 35px; } .switch input { display: none } .slider::before { position: absolute; content: ""; height: 20px; width: 20px; left: 5px; bottom: 5px; background-color: white; transition: 0.4s; border-radius: 50px; } input:checked+.slider { background-color: blue; } input:checked+.slider::before { transform: translateX(20px); } /*input:checked+.slider::after { transform: translateX(20px); }*/ /*FOR DARK MODE*/ .dark-mode { background-color: #666666; color: yellow; font-family: sans-serif; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Toggle</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="toggle"> <label class="switch"> <input type="checkbox" onclick="dark()" checked> <span class="slider"></span> </label> </div> <!-- DARK MODE EFFECT ON PARAGRAPH --> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <script src="app.js"></script> </body> </html>Intente colocar el controlador de eventos onclick en la etiqueta. Luego, también debe alternar el atributo checked en su entrada. Debe encontrar el elemento de entrada correcto y alternar el atributo checked .
También debe ajustar la posición x del control deslizante cuando se verifica la entrada
input:checked+.slider::before { transform: translateX(20px); // was 0px before } function dark() { // setting up dark-mode console.log('dark'); const element = document.body; const input = document.getElementsByTagName('input')[0]; if(input.hasAttribute('checked')){ input.removeAttribute('checked'); }else{ input.setAttribute('checked',true); } element.classList.toggle("dark-mode"); //dark-mode class } label { margin: 10px; cursor: pointer; width: 50px; height: 30px; display: block; border-radius: 50px; position: relative; color: white; } .switch { position: relative; display: inline-block; width: 110px; height: 10px; margin: 0 10px; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: aqua; transition: .4s; border-radius: 35px; ; } .switch input { display: none } .slider::before { position: absolute; content: ""; height: 20px; width: 20px; left: 5px; bottom: 5px; background-color: white; transition: 0.4s; border-radius: 50px; } input:checked+.slider { background-color: blue; } input:checked+.slider::before { transform: translateX(20px); } input:checked+.slider::after { transform: translateX(8px); } <div class="toggle"> <label for="switch" onclick="dark()"> <input type="checkbox" checked> <span class="slider"></span> </label> </div>Puedes probar este código
.switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: #2196F3; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } <label class="switch"> <input type="checkbox" checked> <span class="slider round"></span> </label>