Dark and Light Mode Toggle Button With HTML, CSS, and Javascript 🚩| by Frontend everything | Mini Project
Hello Everyone 👋Welcome to My New Mini project - Dark and light mode toggle button with the help of HTML, CSS, and Javascript
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
Let's start making the mood changer button!
Preview of the project, video preview:
So let's start making the project
HTML 🎈( step - 1 )
<main>
<h1>Dark Mode Toggle</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s.</p>
</main>
<footer id="dark-mode-toggle">
<i class="fas fa-adjust"></i>
<small> Toggle </small>
</footer>
Yes, this is the only HTML, we have structured the page.
CSS🎈( step - 2 )
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap");
body {
overflow: hidden;
box-sizing: border-box;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: poppins;
background-color: #fcf8f5;
color: #2c2d48;
transition: background-color 1.5s, color 1s;
}
h1 {
font-weight: 900;
}
main {
margin-top: auto;
}
main h1 {
font-size: 80px;
}
p {
max-width: 720px;
font-size: 22px;
line-height: 1.6em;
text-align: justify;
}
small {
font-size: 0.5em;
display: block;
}
footer {
cursor: pointer;
margin-top: 30px;
margin-bottom: auto;
font-size: 2em;
text-align: center;
}
.darkmode {
color: #dcdcdc;
background-color: #222831;
}Now, we have designed the structure of the page. And made the page looks attractive.
Here is the Output till now, this is not final output
JavaScript 🎈( step - 3 )
let darkMode = localStorage.getItem("darkMode");
function enableDarkMode() {
document.body.classList.add("darkmode");
localStorage.setItem("darkMode", "enabled");
}
function disableDarkMode() {
document.body.classList.remove("darkmode");
localStorage.setItem("darkMode", null);
}
if (darkMode === "enabled") {
enableDarkMode();
}
// Listeners
const darkModeToggle = document.querySelector("#dark-mode-toggle");
darkModeToggle.addEventListener("click", () => {
darkMode = localStorage.getItem("darkMode");
darkMode !== "enabled" ? enableDarkMode() : disableDarkMode();
});
In the final part, we have made the buttons work with javascript. like click on the button and change the theme.
Final Output
The codepen link is here for making your work easier!
See the Pen Contrast - codepenchallenge by Piyush (@CodedByPiyush) on CodePen.
Click here for the code!
.
.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.