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.
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.
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 🙏💕
Check it more
css responsive menu | CSS animated Menu
countdown timer html javascript | free countdown timer
Custom checkbox in CSS ? | Create a custom checkbox using CSS ?
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
This is very cool! Works beautifully and uses CSS variables. Nicely done. Thanks for taking the time to write this! <3
thank you brother!