How to Create Dark/Light Mode for Website using jQuery?

In this tutorial I will show you How to Create Dark/Light Mode for Website using jQuery.

Using Jquery we demonstrate how to change dark and light mode or toggle between light and dark mode using jQuery. In this just write some css code and javascript to toggle dark mode and light mode website, you can store in local storage to save user state like dark mode and light of website.

Steps to create Dark/Light Mode:

  1. Create an HTML document.
  2. Create CSS for dark mode along with document file.
  3. Add a switch/toggler to toggle between light and dark mode.
  4. Add functionality to the switch/togler to toggle between light and dark mode using JavaScript or jQuery code.

For Example 1: The following example demonstrates switching between light and dark mode using jQuery code. It basically works by using hasClass(), addClass() and removeClass() method.

HTML Code Example:

<div class="mode">
    <div class="change_mode">    
    <span class="lightmode light_mode"><span>Light mode:</span><img src="images/light.png" alt="" /></span>
    </div>
    <div class="change_mode">
    <span class="darkmode dark_mode"><span>Dark mode:</span><img src="images/dark.png" alt="" /></span>
    </div>
    
</div>

Css Code Example:

<style>
        .light{
            background-color: #ffffff;
            color: #000000;  
        }
        .dark{
            background-color: #000000;
            color: #ffffff;
        }
</style>

Jquery Code Example:

<script>
      $( ".light_mode" ).on("click", function() {
          if( $( "body" ).hasClass( "dark" )) {
              $( "body" ).removeClass( "dark" );
          } else {
              $( "body" ).addClass( "dark" );
          }
      });
      $( ".dark_mode" ).on("click", function() {
          if( $( "body" ).hasClass( "light" )) {
              $( "body" ).removeClass( "light" );
          } else {
              $( "body" ).addClass( "light" );
          }
      });
</script>

Hope this blog is helpful for you ,Thanks for reading this blog.

How to Create Dark/Light Mode for Website using jQuery?expoundsofttechsolution