<div class="mode">
  Dark mode:
  <span class="change">OFF</span>
</div>

<div>
  <h1>Implement Dark Mode</h1>
  <h3>Light and Dark Mode</h3>
  <img src="https://i.ibb.co/856wfRH/hacker.png" alt="hacker" border="0">
  <p>
    Click on the switch on top-right
    to move to dark mode.
  </p>
</div>
@import url("https://fonts.googleapis.com/css2?family=Epilogue:wght@500;700&family=Source+Sans+Pro:wght@200&display=swap");
body {
  padding: 10% 3% 10% 3%;
  text-align: center;
}
img {
  height: 140px;
  width: 140px;
}
h1 {
  color: #6578fe;
}
.mode {
  float: right;
}
.change {
  cursor: pointer;
  border: 1px solid #555;
  border-radius: 40%;
  width: 20px;
  text-align: center;
  padding: 5px;
  margin-left: 8px;
}
.dark {
  background-color: #222;
  color: #e6e6e6;
}
$(".change").on("click", function () {
  if ($("body").hasClass("dark")) {
    $("body").removeClass("dark");
    $(".change").text("OFF");
  } else {
    $("body").addClass("dark");
    $(".change").text("ON");
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.