Dark Mode Toggle Button
Hello Guys! Welcome to Coding Torque. In this blog, I'm going to explain to you how to make Dark Mode Toggle Button using HTML, CSS and JavaScript. You can simply use this button to make your website super cool. This will be a step-by-step guide. Let's get started 🚀.
Let's go step by step:
Step 1: HTML Code
<div class="toggle toggle--daynight">
<input type="checkbox" id="toggle--daynight" class="toggle--checkbox">
<label class="toggle--btn" for="toggle--daynight"><span class="toggle--feature"></span></label>
</div>Step 2: CSS Code
*,
*::before,
*::after {
box-sizing: border-box;
}
/* =====================================================
Some defaults across all toggle demos
===================================================== */
.toggle {
display: block;
text-align: center;
margin-top: 40px;
user-select: none;
}
.toggle--checkbox {
display: none;
}
.toggle--btn {
display: block;
margin: 0 auto;
font-size: 1.4em;
transition: all 350ms ease-in;
&:hover {
cursor: pointer;
}
}
.toggle--btn,
.toggle--checkbox,
.toggle--feature {
&,
&:before,
&:after {
transition: all 250ms ease-in;
}
&:before,
&:after {
content: '';
display: block;
}
}
$toggleHeight: 70px;
$toggleWidth: 125px;
$borderWidth: 5px;
$toggleBtnRadius: $toggleHeight - 14px;
$bgColor--night: #3c4145;
$borderColor--night: #1c1c1c;
$toggleBtn-bgColor--night: #fff;
$toggleBtn-borderColor--night: #e3e3c7;
$bgColor--day: #9ee3fb;
$borderColor--day: #86c3d7;
$toggleBtn-bgColor--day: #ffdf6d;
$toggleBtn-borderColor--day: #e1c348;
$cloud-borderColor: #d3d3d3;
$cloud-bgColor: #fff;
.toggle--daynight,
.toggle--like {
.toggle--btn {
position: relative;
height: $toggleHeight;
width: $toggleWidth;
border-radius: $toggleHeight;
//toggle button
&:before {
position: absolute;
top: 2px;
left: 4px;
width: $toggleBtnRadius;
height: $toggleBtnRadius;
border-radius: 50%;
}
}
}
.toggle--daynight {
.toggle--btn {
border: $borderWidth solid $borderColor--night;
background-color: $bgColor--night;
//toggle button
&:before {
background-color: $toggleBtn-bgColor--night;
border: $borderWidth solid $toggleBtn-borderColor--night;
}
&:after {
position: absolute;
top: 62%;
left: $toggleWidth - ($toggleBtnRadius) - ($borderWidth * 2) - 20px;
z-index: 10;
width: $toggleBtnRadius / 5;
height: $toggleBtnRadius / 5;
opacity: 0;
background-color: $cloud-bgColor;
border-radius: 50%;
//crazy ass box-shadow to make the cloud
box-shadow: $cloud-bgColor 0 0,
$cloud-bgColor 3px 0,
$cloud-bgColor 6px 0,
$cloud-bgColor 9px 0,
$cloud-bgColor 11px 0,
$cloud-bgColor 14px 0,
$cloud-bgColor 16px 0,
$cloud-bgColor 21px -1px 0 1px,
$cloud-bgColor 16px -7px 0 -2px,
$cloud-bgColor 7px -7px 0 1px,
$cloud-borderColor 0 0 0 4px,
$cloud-borderColor 6px 0 0 4px,
$cloud-borderColor 11px 0 0 4px,
$cloud-borderColor 16px 0 0 4px,
$cloud-borderColor 21px -1px 0 5px,
$cloud-borderColor 16px -7px 0 1px,
$cloud-borderColor 7px -7px 0 5px;
transition: opacity 100ms ease-in;
}
}
@keyframes starry_star {
50% {
background-color: rgba(255,255,255,0.1);
box-shadow: #fff 30px -3px 0 0,
#fff 12px 10px 0 -1px,
rgba(255,255,255,0.1) 38px 18px 0 1px,
#fff 32px 34px 0 0,
rgba(255,255,255,0.1) 20px 24px 0 -1.5px,
#fff 5px 38px 0 1px;
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 100;
transform: scale(1.1);
}
55% {
transform: scale(1.1);
}
75% {
transform: scale(.9);
}
100% {
opacity: 100;
transform: scale(1);
}
}
//stars
.toggle--feature {
display: block;
position: absolute;
top: 9px;
left: 52.5%;
z-index: 20;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #fff;
box-shadow: rgba(255,255,255,0.1) 30px -3px 0 0,
rgba(255,255,255,0.1) 12px 10px 0 -1px,
#fff 38px 18px 0 1px,
rgba(255,255,255,0.1) 32px 34px 0 0,
#fff 20px 24px 0 -1.5px,
rgba(255,255,255,0.1) 5px 38px 0 1px;
animation: starry_star 5s ease-in-out infinite;
&:before {
position: absolute;
top: -2px;
left: -25px;
width: 18px;
height: 18px;
background-color: $toggleBtn-bgColor--night;
border-radius: 50%;
border: 5px solid $toggleBtn-borderColor--night;
box-shadow: $toggleBtn-borderColor--night -28px 0 0 -3px,
$toggleBtn-borderColor--night -8px 24px 0 -2px;
transform-origin: -6px 130%;
}
}
//what happens once checkbox is checked
.toggle--checkbox:checked {
& + .toggle--btn {
background-color: $bgColor--day;
border: $borderWidth solid $borderColor--day;
&:before {
left: $toggleWidth - ($toggleBtnRadius) - ($borderWidth * 2) - 4px;
background-color: $toggleBtn-bgColor--day;
border: $borderWidth solid $toggleBtn-borderColor--day;
}
&:after {
opacity: 100;
animation-name: bounceIn;
animation-duration: 0.60s;
animation-delay: 0.10s;
animation-fill-mode: backwards;
animation-timing-function: ease-in-out;
}
> .toggle--feature {
opacity: 0;
box-shadow: rgba(255,255,255,0.1) 30px -3px 0 -4px,
rgba(255,255,255,0.1) 12px 10px 0 -5px,
#fff 38px 18px 0 -3px,
rgba(255,255,255,0.1) 32px 34px 0 -4px,
#fff 20px 24px 0 -5.5px,
rgba(255,255,255,0.1) 5px 38px 0 -3px;
animation: none;
&:before {
left: 25px;
transform: rotate(70deg);
}
}
}
}
}Output Till Now
Final Output
Code Credits: @xmjol
Written by: Coding Torque | Piyush Patil
If you want me to code any project or post any specific post,
feel free to DM me at IG @code.scientist or @codingtorque
If you have any doubt or any project ideas feel free to
Contact Us
Hope you find this post helpful💖
Follow us on Instagram for more projects like
this👨💻