You are currently viewing Light/Dark Mode toggle With Navigation Bar | Light/Dark Mode

Light/Dark Mode toggle With Navigation Bar | Light/Dark Mode

Light/Dark Mode toggle With Navigation Bar | Light/Dark Mode

In this article, we create a Light/Dark Mode toggle that changes light theme to dark or dark theme to light theme with 1 tap. We add a real-life project like we use navbar with this project, when we change the light to dark navbar text black to white and when we change dark to light text color black to white changed.

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>

So here is html code, we connect our css and javascript file. Also include jquery CDN for including jquery code. You can see the output with only html code, then we write css for styling the dark light theme toggle. And for additional functionality, we use jquery in this project

50+ Frontend Project Code 

Html Output

Light/Dark Mode toggle html

Let’s style this navbar with toggle mode!

Ecommercewebsite using html css javascript

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;
}

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.

Css Output

Light/Dark Mode toggle 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 👇🔥

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.

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

Leave a Reply