Light/Dark Mode Toggle With Navigation Bar Using HTML and CSS
In this article, we demonstrate how to build a Light/Dark Mode toggle that, with a single tap, switches the theme from light to dark or from dark to light. When we change the light-to-dark navbar text color from black to white and when we change the dark-to-light text color from black to white, we add a real-life project, similar to how we use a navbar with this project.
| Code by | Sasha |
| Project Download | Link Available Below |
| Language used | HTML, CSS and JavaScript |
| External link / Dependencies | Yes |
| Responsive | Yes |
50+ HTML, CSS & JavaScript Projects With Source Code
So we use Html, Css, and JavaScript (jquery) in this project. So let’s start with html code section🔥.
Html Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar Toggle</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="theme-switch">
<div class="switch"></div>
</div>
<div class="navigation">
<ul>
<a href="http://www.sashatran.com/" class="active" target="_blank">Home</a>
<a href="https://codepen.io/sashatran/" target="_blank">About</a>
<a href="https://instagram.com/sasha.codes/" target="_blank">Instagram</a>
<a href="https://twitter.com/sa_sha26" target="_blank">Twitter</a>
</ul>
</div>
</div>
<!-- Javascript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>Here is the HTML code, and we have connected the JS and CSS files. When including jQuery code, also add the jQuery CDN. The output can be seen using only html code, and we create CSS to style the dark and light themes. We also use jQuery in this project for extra features.
Restaurant Website Using HTML and CSS
Html Output
Let’s style this navbar with toggle mode!
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
Css Code
@import url('
https://fonts.googleapis.com/css?family=Oswald'
);
:root {
--background: #000;
--text: #fff;
--highlight: #ff1ead;
}
body {
background: var(--background);
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
transition: 0.5s background ease;
}
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.theme-switch {
--background: #fff;
--text: #000;
color: var(--text);
width: 70px;
height: 30px;
background: var(--highlight);
border-radius: 50px;
position: relative;
}
.theme-switch .switch {
background: white;
width: 24px;
height: 24px;
background: var(--background);
border-radius: 100%;
position: absolute;
top: 3px;
left: 4px;
transition: 0.5s all ease;
}
.light-theme {
--background: #fff;
--text: #000;
background: var(--background);
}
.light-theme .theme-switch {
background: var(--text);
}
.light-theme .theme-switch .switch {
transform: translateX(37px);
}
.light-theme a {
color: var(--text);
}
.navigation {
display: flex;
justify-content: center;
}
ul {
display: flex;
list-style-type: none;
}
ul a {
margin: 10px 30px;
position: relative;
color: var(--text);
font-family: '
Oswald'
, sans-serif;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
}
ul a:before {
position: absolute;
bottom: -2px;
content: '
'
;
width: 100%;
height: 3px;
background: var(--highlight);
transform: translateX(-100%);
opacity: 0;
}
ul a:hover:before {
opacity: 1;
transition: 0.5s transform ease, 0.8s opacity ease;
transform: translateX(0);
}
ul .active {
color: var(--highlight);
}
ul .active:hover:before {
opacity: 0;
}
ADVERTISEMENT
Using the import link, we’ll import some of the font for our dark and light mode navbar. Then, using the body tag selector, we’ll change the background to “offwhite,” the display property to “flex,” the align item property to centre the items, and the overflow property to hide the extra content.
ADVERTISEMENT
Responsive Gym Website Using HTML ,CSS & JavaScript
ADVERTISEMENT
Then, using the background and font colour properties, we will add two distinct styles to both switch themes, make a new switch theme, and alter the font colour whenever the user hovers their mouse over the dark toggle button.
ADVERTISEMENT
Now we write css code completely, now you can see how we style this page, but it’s not working till we add 3 line jquery for toggle light-dark theme code.
ADVERTISEMENT
Css Output
So now time to write javascript (Jquery) Code.
Javascript (Jquery) Code
$(".theme-switch").on("click", () => {
$("body").toggleClass("light-theme");
});That’s it for our project, our project is completely done. You can output videos for how we style and add functionality using javascript. So here is the video output 👇🔥
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
Video Output Light/Dark Mode Toggle:
Now you can this amazing toggle light-dark theme video. How to change the text and background color when we toggle, also you can see when we hover on the navbar category it’s amazing hover line come. So that’s it for a project we use html css and jquery code.
Live Preview Light/Dark Mode Toggle:
Hope you like this project, we create your own and use this project in any project as part project like the reviews section, contact form. If you need any more project-related frontend. Visit our homepage and you get 100+ projects💝.
if you have any confusion Comment below or you can contact us by filling out our contact us form from the home section. 🤞🎉
Code By – Sasha
written by – Codewithrandom
Which code editor do you use for this Light/Dark Mode toggle With Navigation Bar coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
is this project responsive or not?
Yes! this is a responsive project
Do you use any external links to create this project?
Yes!
Which mode is better for eyes dark or light?
In comparison to light mode, dark mode is apparently better for your eyes because it reduces glare and blue light on your digital screens.
