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