Hi Developer , Today we will how to enable dark mode in a website
Lets see how to enable dark mode using a simple website
Initially we should write the CSS for both the dark and the light mode and then the mode conversion is done by clicking the button.
When the button is clicked the javascript gets triggered and gets the all the element (Tags) inside the body tag. And then using the toggle() function in the javascript to checks for the .dark class in all the tags in the body tag if the .dark class is available it will remove the class , if the class is not available then it will add the .dark class will be added
This is how the dark mode is enabled in a website.
Step 1 : Create HTML File.
Step 2 : Add CSS for Dark Mode and Light Mode.
Step 3 : Add Switch/Toggle Button for Dark Mode and Light Mode.
Step 4 : Add functionality for Toggle Dark Mode and Light Mode using Javascript or jQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script>
<meta charset="UTF-8">
<meta name="viewport" content= "width=device-width, initial-scale=1.0">
<title>How To Toggle Dark And Light Mode Using jQuery - ITSolutionsGuides</title>
<style>
body{
padding:2% 3% 10% 3%;
text-align:center;
}
h1{
color: #000;
margin-top:30px;
}
.dark{
background-color: #222;
color: #e6e6e6;
}
.dark h1{
color: #fff
}
.theme-switch-wrapper{
display: flex;
align-items: center;
float: right;
}
.theme-switch{
display: inline-block;
height: 34px;
position: relative;
width: 60px;
text-align: right;
}
.theme-switch input{
display:none;
}
.slider{
background-color: #ccc;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: .4s;
}
.slider:before{
background-color: #fff;
bottom: 4px;
content: "";
height: 26px;
left: 4px;
position: absolute;
transition: .4s;
width: 26px;
}
input:checked + .slider{
background-color: #66bb6a;
}
input:checked + .slider:before{
transform: translateX(26px);
}
.slider.round{
border-radius: 34px;
}
.slider.round:before{
border-radius: 50%;
}
</style>
</head>
<body>
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round"></div>
</label>
<label style="margin-left: 10px;">Switch Mode</label>
</div><br>
<h1><i>ITSolutionsGuides<i></h1>
<h3>Light Mode and Dark Mode</h3>
<script>
$(document).ready(function(){
$('#checkbox').click(function(){
var element = document.body;
element.classList.toggle("dark");
});
});
</script>
</body>
</html>We hope it helps everyone. Thanks for supporting ITSolutionsGuides and keep supporting us also follow us in social media platforms.
Be the first to know about releases and tutorial news and solutions.
We care about your data in our privacy policy.
ITSolutionsGuides was started mainly to provide good and quality web solutions for all the developers. We provide tutorials to support all the developers and also we try to provide solutions to the errors we face while coding.
ITSolutionsGuides, provide users with an easy-to-use form to reach out for support or inquiries.
Copyright © 2023 - 2024 All rights reserved | ITSolutionsGuides