Dark Mode Toggle

Adding a dark mode toggle to your webiste is basically a standard by now, one of the things every website needs to have.

Light Mode

Dark Mode

HTML

<div class="topnav">
  <a onclick="myFunction1()" id="myBtn" title="Dark Mode"><i class="fa-solid fa-circle-half-stroke"></i>Dark Mode Toggle</a>
</div>

CSS

The code for the Navbar where the button is placed.

.topnav {
  overflow: hidden;
  background-color: #4d79ff;
  position: sticky;
  top: 0;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

Javascript

The code for the Navbar where the button is placed.

function myFunction() {
   var element = document.body;
   element.classList.toggle("dark-mode");
}