Hello everyone, In this blog post you will learn how to create Dark and Light Theme toggle using HTML CSS & JavaScript.
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>Dark/Light Mode Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Dark/Light Mode</h1>
<button class="toggle-btn">
<span class="circle"><i class="icon fas fa-sun"></i></span>
</button>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat at nam omnis quod earum laborum harum officia illum sint accusantium, quae repellendus. Doloribus neque unde, corporis ut repudiandae nulla officiis rem eligendi blanditiis. Possimus sit quam deleniti facilis rem expedita harum aperiam repudiandae laudantium, omnis nisi placeat reprehenderit, consequuntur dolorum perferendis natus temporibus sequi! Et ipsa consectetur possimus cumque amet molestiae odit mollitia temporibus nostrum, hic explicabo nemo reprehenderit! Enim explicabo quam harum repudiandae voluptatum maxime sapiente consequuntur adipisci sint alias et esse corrupti accusantium magni, quia porro tenetur vel deleniti accusamus ad maiores. Vel quibusdam, quia eos maiores odio aliquid enim. Hic reiciendis sed sit quas vero nostrum praesentium dolorem officia ipsum soluta, ducimus amet at excepturi blanditiis, officiis repudiandae eligendi impedit voluptates non. Asperiores a pariatur ad, iusto repellat earum itaque in id unde. Quam modi quod sit cupiditate! Maxime nisi perspiciatis provident facilis voluptatum, beatae ad deleniti cumque voluptatibus omnis corrupti rem delectus ipsum architecto praesentium porro minima odit ab eius incidunt pariatur alias quis amet. Sed fuga, expedita ad voluptatum quaerat itaque. Iste modi est sit quo, eius beatae velit, qui dolores, repudiandae debitis in nam placeat aliquam cupiditate tempore eaque. Consequatur repellat hic rem sequi officiis, explicabo minima nam dolor libero, soluta ipsam! Maiores nesciunt aliquam reprehenderit quidem ut nisi reiciendis ratione omnis eos delectus sed, totam rerum laborum deleniti earum quo fugit iusto iure adipisci ea voluptate eum sit. Vitae laudantium hic, a iusto, harum earum animi voluptate accusamus incidunt sed, dolor minus rerum!</p>
</body>
<script>
document.querySelector(".toggle-btn").addEventListener('click', () =>{
document.body.classList.toggle('dark-mode');
if (document.body.classList.contains('dark-mode')) {
document.querySelector(".icon").classList.remove('fa-sun');
document.querySelector(".icon").classList.add('fa-moon');
} else {
document.querySelector(".icon").classList.remove('fa-moon');
document.querySelector(".icon").classList.add('fa-sun');
}
});
</script>
</html>
CSS CODE:
*{
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
box-sizing: border-box;
}
body{
background-color: #ddd;
color: #333;
transition: .2s ease-in-out;
text-align: center;
}
body.dark-mode{
background-color: #333;
color: #ddd;
}
h1{
margin: 40px;
}
p{
margin: 10px 0;
line-height: 25px;
text-align: justify;
padding: 40px;
max-width: 800px;
margin: 20px auto;
}
.toggle-btn{
position: relative;
width: 140px;
height: 60px;
background: url("light.png") no-repeat center;
background-size: cover;
border-radius: 30px;
border: none;
transition: .4s linear;
cursor: pointer;
}
.dark-mode .toggle-btn{
background: url("dark.png") no-repeat center;
background-size: cover;
}
.circle{
position: absolute;
width: 44px;
height: 44px;
background-color: rgba(255, 255, 255, .6);
border-radius: 22px;
top: 8px;
left: 90px;
transition: .4s linear;
}
.dark-mode .circle{
position: absolute;
top: 8px;
left: 4px;
background-color: rgba(51, 51, 51, .6);
}
.circle::before,
.circle::after{
content: "";
width: 44px;
height: 44px;
border-radius: 22px;
position: absolute;
left: 0;
box-sizing: border-box;
border: 1px solid #ddd;
animation: waves 1s linear infinite;
}
.dark-mode .circle::before,
.dark-mode .circle::after{
border: 1px solid #333;
}
.circle::after{
animation-delay: .5s;
}
@keyframes waves{
to{
transform: scale(1.4);
opacity: .3;
}
}
.toggle-btn i{
font-size: 22px;
line-height: 44px;
transition: .5s linear;
}
.dark-mode .toggle-btn i{
transform: rotate(360deg);
}
.fa-sun{
color: #d4ac0d;
}
.fa-moon{
color: #eaf2f8;
}
Download Source Code From HERE
No comments:
Post a Comment