Create Theme Toggle Switch Using Javascript (Light/dark)mode Toggle

Create Theme Toggle Switch Using Javascript (Light/dark)mode Toggle

Welcome to the codewithrandom blog in this blog we learn how to create Theme Switch using javascript. We use HTML & css and javascript for this Theme Switch using javascript.  Hope you enjoy our blog so let’s start with a basic HTML structure for Theme Switch.

HTML code for theme toggle

 <body data-theme="light">  
  <section>  
   <div class="container">  
    <h1>CODEWITHRANDOM</h1>  
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos maiores atque dolorum voluptatum laudantium id  
     adipisci quisquam ea laborum sed ipsam quam aspernatur ratione architecto numquam, aperiam recusandae ducimus  
     aliquid ut enim culpa quis minus! Autem id, recusandae incidunt maiores non saepe dolor ullam perspiciatis!  
     Nulla nemo sequi vero et.</p>  
    <button>Hello!</button>  
   </div>  
  </section>  
  <div class="theme-switcher">  
   <input type="checkbox" id="switcher">  
   <label for=switcher>switch</label>  
  </div>  
 </body>  

There is all HTML code for the theme toggle. Now you can see output without css then we write css for our theme toggle.

 

CSS for theme toggle 

 * {  
  padding: 0;  
  margin: 0;  
  box-sizing: border-box;  
 }  
 body {  
  font-family: "Montserrat";  
  color: var(--color-4);  
 }  
 body[data-theme="light"] {  
  --color-1: rgb(196, 220, 241);  
  --color-2: white;  
  --color-3: white;  
  --color-4: rgb(80, 82, 110);  
 }  
 body[data-theme="dark"] {  
  --color-1: #1e1f26;  
  --color-2: #292c33;  
  --color-3: rgb(39, 40, 42);  
  --color-4: rgb(186, 186, 202);  
 }  
 section {  
  background-color: var(--color-1);  
  min-height: 100vh;  
  width: 100%;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
 }  
 .container {  
  width: 90%;  
  margin: 0 auto;  
  background-color: var(--color-2);  
  border-radius: 8px;  
  padding: 20px;  
  max-width: 500px;  
 }  
 h1 {  
  font-size: 30px;  
  font-weight: 500;  
  text-transform: uppercase;  
 }  
 p {  
  margin-top: 10px;  
  font-size: 16px;  
  font-weight: 500;  
  letter-spacing: 1px;  
  line-height: 25px;  
 }  
 button {  
  background-color: var(--color-4);  
  padding: 10px 30px;  
  border: none;  
  font-size: 24px;  
  text-transform: uppercase;  
  color: var(--color-3);  
  border-radius: 4px;  
  margin-top: 20px;  
  cursor: pointer;  
 }  
 .theme-switcher {  
  position: absolute;  
  right: 30px;  
  top: 10px;  
 }  
 input {  
  width: 0;  
  height: 0;  
  display: none;  
  visibility: hidden;  
 }  
 label {  
  cursor: pointer;  
  display: block;  
  text-indent: -9999px;  
  height: 30px;  
  width: 60px;  
  border-radius: 50px;  
  background-color: rgb(255, 255, 255);  
  transition: 0.5s ease background-color;  
 }  
 label::after {  
  position: absolute;  
  content: "";  
  width: 20px;  
  height: 20px;  
  border-radius: 50px;  
  top: 50%;  
  left: 5px;  
  transform: translateY(-50%);  
  background-color: rgb(46, 42, 68);  
  transition: 0.5s ease;  
 }  
 input:checked + label::after {  
  /* left: calc(100% - 2.5px); */  
  left: calc(100% - 25px);  
  background-color: aliceblue;  
 }  
 input:checked + label {  
  background-color: rgb(25, 26, 37);  
  border: 2px solid whitesmoke;  
 }  

Now we complete our css section,  Here is our updated output with css. in the next code slide we cover our whole javascript.

50+ Frontend Project With Code

Javascript for theme toggle

 const input = document.querySelector(".theme-switcher input");  
 input.addEventListener("change", (e) => {  
  if (e.target.checked) {  
   document.body.setAttribute("data-theme", "dark");  
  } else {  
   document.body.setAttribute("data-theme", "light");  
  }  
 });  

This is all our small JavaScript. Hope you like this theme toggle, you can see the 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  Theme Switch using javascript with simple coding of HTML & css and javascript. If we did a mistake or any confusion please drop a comment so give a reply or help you in easy learning.
 
written by – codewithrandom/Anki 
Share on:

0 thoughts on “Create Theme Toggle Switch Using Javascript (Light/dark)mode Toggle”

Leave a Comment