Toggle switch css dark mode | Dark / Light Toggle Switch – codewihhrandom

Toggle switch css dark mode |  Dark / Light Toggle Switch – codewihhrandom

Welcome🎉 to Code With Random blog. In this blog, we learn that how we create a   dark mode toggle. We use HTML, and javascript for this dark mode toggle. Hope you enjoy our blog so let’s start with a basic HTML structure for a   dark mode toggle. 

HTML code

 <label class="switch">  
<input class="switch__input" type="checkbox" data-theme-toggle>
<span class="switch__slider"></span>
</label>

There is all HTML code for the dark mode toggle. Now, you can see output without CSS, then we write css & javascript for the dark mode toggle.

output

Css dark mode toggle |  Dark / Light Toggle Switch - codewihhrandom

CSS Code

 * {  
margin: 0;
padding: 0;
border: none;
outline: none;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
html,
body {
height: 100%;
}
:root {
--color-1: #040404;
--color-2: #f9f9f9;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--color-1);
transition: background 0.6s;
}
.switch {
position: relative;
display: inline-block;
width: 3.8rem;
height: 2rem;
}
.switch__input {
opacity: 0;
width: 0;
height: 0;
}
.switch__slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #ff4754;
border-radius: 1rem;
transition: background 0.2s;
cursor: pointer;
}
.switch__slider::before {
content: "";
position: absolute;
left: 0.2rem;
top: 50%;
transform: translateY(-50%);
height: 1.6rem;
width: 1.6rem;
border-radius: 1.6rem;
background: var(--color-1);
transition: transform 0.2s, width 0.2s, background 0.2s;
}
.switch__input:checked + .switch__slider {
background: var(--color-2);
}
.switch__input:not(:checked):active + .switch__slider::before {
width: 2.4rem;
}
.switch__input:checked:active + .switch__slider::before {
transform: translate(1rem, -50%);
width: 2.4rem;
}
.switch__input:checked + .switch__slider::before {
transform: translate(1.8rem, -50%);
}

Now we have completed our CSS section,  Here is our updated output CSS.

output 

Css dark mode toggle |  Dark / Light Toggle Switch - codewihhrandom

Css dark mode toggle |  Dark / Light Toggle Switch - codewihhrandom

Now add javascript for toggle themes.

Javascript code

 const stylesheet = document.documentElement.style;  
const toggle = document.querySelector(".switch__input[data-theme-toggle]");
toggle.addEventListener("click", () => {
// get the css variables
const color1 = getComputedStyle(document.documentElement).getPropertyValue(
"--color-1"
);
const color2 = getComputedStyle(document.documentElement).getPropertyValue(
"--color-2"
);
// switching the css variables
stylesheet.setProperty("--color-1", color2);
stylesheet.setProperty("--color-2", color1);
});

Final output

Css dark mode toggle |  Dark / Light Toggle Switch - codewihhrandom

Css dark mode toggle |  Dark / Light Toggle Switch - codewihhrandom

Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the dark mode toggle. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create a  dark mode toggle using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

Share on:

0 thoughts on “Toggle switch css dark mode | Dark / Light Toggle Switch – codewihhrandom”

Leave a Comment