<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");
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.