Light/Dark Mode toggle css

Light/Dark Mode Toggle With Navigation Bar Using HTML and CSS

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.

Light/Dark Mode Toggle With Navigation Bar Using HTML and CSS

Code bySasha
Project DownloadLink Available Below
Language usedHTML, CSS and JavaScript
External link / DependenciesYes
ResponsiveYes
Light/Dark Mode toggle With Navigation Bar Table

 

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

Light/Dark Mode Toggle With Navigation Bar Using HTML and CSS

Let’s style this navbar with toggle mode!

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

Css Code

@import url(&#39;
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: &#39;
    Oswald&#39;
    , sans-serif;
     font-size: 20px;
     text-transform: uppercase;
     text-decoration: none;
}
 ul a:before {
     position: absolute;
     bottom: -2px;
     content: &#39;
    &#39;
    ;
     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

Light/Dark Mode Toggle With Navigation Bar Using HTML and CSS

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💝.

Quiz Project Using Javascript

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.



Leave a Reply