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

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

Css dark mode toggle |  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 🙏💕!

2 Comments

  1. Replies
    1. Thank you for notifying we will check the code and if there are any bugs we will fix and update the code.
      Regards,
      Team CodeWithRandom❤

      Delete

Post a Comment

Previous Post Next Post