Telegram Group Join Now
ADVERTISEMENT
Create Theme Toggle Between Dark and Light Mode Using JavaScript
ADVERTISEMENT
ADVERTISEMENT
Welcome to the codewithrandom blog. In this blog, We learn how to CreateTheme a Toggle Between Dark and Light Mode Using JavaScript. We use HTML, CSS, and JavaScript for this Theme Toggle from Light to Dark.
Hope you enjoy our blog so let’s start with a basic HTML structure for Theme Switch.
ADVERTISEMENT
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 and JavaScript, then we write Css for Styling our theme toggle and Use JavaScript For the Main Functionality Of the Theme Toggle Between Dark and Light Mode.
ADVERTISEMENT
Portfolio Website using HTML and CSS (Source Code)
CSS Code 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 Code Section For Theme Toggle. Here is our updated output with Html and Css. in the next code slide we cover our whole javascript For Theme Toggle.
50+ Html ,Css & Javascript Projects With Source Code
ADVERTISEMENT
JavaScript Code 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");
}
});
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
This is all small Code JavaScript For Theme Toggle Between Dark and Light Mode. I 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 🙏💕
ADVERTISEMENT
ADVERTISEMENT
Live Preview Of Theme Toggle Between Dark and Light Mode
ADVERTISEMENT
ADVERTISEMENT
This is very cool! Works beautifully and uses CSS variables. Nicely done. Thanks for taking the time to write this! <3
thank you brother!