How To Toggle Dark and Light Mode using jQuery

Websolutionstuff | Nov-24-2020 | Categories : PHP jQuery CSS Bootstrap

In this article, we will see how to toggle between dark and light modes using jquery. As per the current trend of web development, many websites provide the user with a reading select themes like dark mode and light mode or day/night mode of website and it's very easy to implement in the website.

In this just write CSS code and javascript to toggle the dark mode and light mode websites. Also, you can store it in local storage to save the state of the user-select themes like dark mode and light of the website.

So, let's see toggle between light and dark modes using jquery.

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 Between Dark and Light Mode Website using jQuery ?</title>      
        padding:2% 3% 10% 3%; 
        color: #03aa96; 
            background-color: #222; 
            color: #e6e6e6; 
        .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 {
        .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%;
    <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;">Select Mode</label>
        <p><i>We Give Best Stuff for You</i></p> 
        <h3>Light Mode and Dark Mode</h3>
                var element = document.body;         







You might also like:

Recommended Post
Featured Post
How To Create Pie Chart In Laravel 9 Using Highcharts
How To Create Pie Chart In Lar...

In this article, we will see how to create a pie chart in laravel 9 using highcharts. A pie chart is a circular statisti...

Read More


How To Disable Weekends In jQuery Datepicker
How To Disable Weekends In jQu...

In this tutorial, we will see how to disable weekend dates in jquery datepicker. In the date picker, the weeke...

Read More


Laravel 8 Ajax CRUD With Yajra Datatable
Laravel 8 Ajax CRUD With Yajra...

In this tutorial, we will see laravel 8 ajax crud with yajra datatable. I will show you how to create ajax crud ope...

Read More


How To Add jQuery Datatable Column Filter Dropdown On Top
How To Add jQuery Datatable Co...

In this article, we will see how to add a jquery datatable column filter dropdown on top. Here, we will learn how t...

Read More