stackoom
  简体   繁体   中英

dark mode toggle button not functioning

 原文  2022-06-18 03:39:30  7   4    javascript/ html/ css

Question

I'm creating a to-do list app for my portfolio. I'd like to add a dark-mode feature for my body/background. However, my toggle button looks fine but the switch doesn't seem to function and I can't seem to figure out why. Does anyone see anything wrong or that may be interfering? 

 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>

4 answers

solution1
 2  2022-06-18 05:00:17

Now, It's working fine after doing some modification and adding few properties for dark mode. Hope you like it. Thanks. 

 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>

solution2
 1  2022-06-18 04:21:46

Try to put the onclick event handler on the label. Then, you also need to toggle the checked attribute on your input. You need to find the correct input element and toggle the checked attribute.

You also need to adjust the x-position of the slider when the input is checked

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>

solution3
 0  2022-06-18 03:52:30

You can Try This code

 .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>

solution4
 0  2022-06-18 03:58:48

Maybe it will solve your problem

    input:checked + .slider::before {
     transform: translateX(20px);
    }

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to change toggle button dark mode smoothly Dark mode toggle Why is my Tailwind CSS toggle button invisible in dark mode? Setting up a dark mode toggle button dynamically with vanilla JS Change border color when turn on dark mode via toggle button Light mode dark mode toggle Use Single button to toggle two functions for easy Light and Dark Mode React light/dark mode toggle Adding LocalStorage to a Dark Mode Toggle Switch to dark mode button
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM