Theme Switch using javascript | theme toggle html css javascript

 Theme Switch using javascript | theme toggle html css javascript

Theme Switch using javascript | theme toggle html css javascript



Welcome🎉 to codewithrandom blog in this blog we learn that how we 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 theme toggle  . Now you can see output without css then we write css for our theme toggle.

Theme Switch using javascript | theme toggle html css javascript

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 next code slide we cover our whole javascript.

Theme Switch using javascript | theme toggle html css javascript


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 output video and project screenshots. See our other blogs and gain knowledge in front end development. Thank you 🙏💕

Theme Switch using javascript | theme toggle html css javascript

Theme Switch using javascript | theme toggle html css javascript




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 

2 Comments

  1. This is very cool! Works beautifully and uses CSS variables. Nicely done. Thanks for taking the time to write this! <3

    ReplyDelete

Post a Comment

Previous Post Next Post