CODEWITHSUNDEEP
javascripthtmlcss
Alana Rèyes
Alana Rèyes

Reputation: 37

dark mode toggle button not functioning

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>

Upvotes: 1

Views: 872

Answers (4)

Mohammad Ahmad Khan
Mohammad Ahmad Khan

Reputation: 41

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>

Upvotes: 2

John
John

Reputation: 11399

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>

Upvotes: 1

Anuj Panwar
Anuj Panwar

Reputation: 408

Maybe it will solve your problem

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

Upvotes: 0

Dibyayan Chatterjee
Dibyayan Chatterjee

Reputation: 36

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>

Upvotes: 0

Related Questions