How To Toggle Dark And Light Mode Using jQuery

  Jul 2023
  Category: jQuery
How To Toggle Dark And Light Mode Using jQuery

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.

Lets Start Coding

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"> 
    <script src=""> </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>      
	        padding:2% 3% 10% 3%; 
	        color: #000; 
            background-color: #222; 
            color: #e6e6e6; 
        .dark h1{
          color: #fff
            display: flex;
            align-items: center;  
            float: right;                      
	        display: inline-block;
	        height: 34px;
	        position: relative;
	        width: 60px;
	        text-align: right;
        .theme-switch input{
	        background-color: #ccc;
	        bottom: 0;
	        cursor: pointer;
	        left: 0;
	        position: absolute;
	        right: 0;
	        top: 0;
	        transition: .4s;
        	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);
        	border-radius: 34px;
        	border-radius: 50%;
    <div class="theme-switch-wrapper">
        <label class="theme-switch" for="checkbox">
            <input type="checkbox" id="checkbox" />
            <div class="slider round"></div>
      <label style="margin-left: 10px;">Switch Mode</label>
        <h3>Light Mode and Dark Mode</h3>
                var element = document.body;

We hope it helps everyone. Thanks for supporting ITSolutionsGuides and keep supporting us also follow us in social media platforms.

Subscribe for NewsLetter

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.

Contact US

ITSolutionsGuides, provide users with an easy-to-use form to reach out for support or inquiries.

whatsapp  gmail  instagram-new--v1  facebook-circled  twitter-circled  linkedin  github  pinterest 

Copyright © 2023 - 2024 All rights reserved | ITSolutionsGuides