How To Create Dark and Light Mode Website using jQuery

Websolutionstuff | Nov-21-2020 | Categories : jQuery CSS HTML Bootstrap

In this article, we will see how to create a dark and light mode website using jquery. As you can see many websites and mobile applications provide a light theme as well as a dark theme to the user. It is useful for websites that have long content and requires users to focus on the screen for a long time.

Dark and light mode features are very useful for the user especially when your website has more content or text. So, here we will see how to add dark mode and light mode in the website step by step.

So, let's see how to create a dark/light mode website using javascript and day and night mode website using jquery.

Step 1: Create HTML File

Step 2: Add CSS for Dark and Light Mode

Step 3: Add Button for Dark and Light Mode

Step 4: Add Script for Dark and Light Mode Theme

 

Example:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>How To Create Dark and Light Mode Website using jQuery ?</title>        
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <style> 
        body{         
        text-align:center; 
        } 
        img{ 
            height:140px; 
            width:140px;  
        } 
        h1{ 
        color: #03aa96; 
        margin-top: 50px;
        } 
        .mode { 
            float:right; 
            margin-top: 20px;
            margin-right: 20px;
        } 
        .change { 
            cursor: pointer; 
            border: 1px solid #555; 
            border-radius: 10%; 
            width: 20px; 
            text-align: center; 
            padding: 8px; 
            margin-left: 8px; 
        } 
        .dark{ 
            background-color: #222; 
            color: #e6e6e6; 
        } 
    </style> 
</head>   
<body> 
    <div class="mode"> 
        <b>Select Mode:</b><span class="change">OFF</span> 
    </div><br>     
    <div> 
        <h1>Websolutionstuff</h1> 
        <p><i>We Give Best Stuff for You</i></p> 
        <h3>Light Mode and Dark Mode</h3>                    
        <p> 
            Click on the switch on <b>Top Right Corner</b>
            to move to <b>Dark Mode</b> and <b>Light Mode.</b>
        </p> 
    </div>       
    <script> 
        $( ".change" ).on("click", function() { 
            if( $( "body" ).hasClass( "dark" )) { 
                $( "body" ).removeClass( "dark" ); 
                $( ".change" ).text( "OFF" ); 
            } else { 
                $( "body" ).addClass( "dark" ); 
                $( ".change" ).text( "ON" ); 
            } 
        }); 
    </script> 
</body>   
</html>

 

 

Output: 

How_To_Create_Dark_Mode_Website_using_jQuery

 

 

How_To_Create_Light_Mode_Website_using_jQuery

 


You might also like:

Recommended Post
Featured Post
Laravel 9 Authentication Using Inertia JS
Laravel 9 Authentication Using...

In this article, we will see laravel 9 authentication using inertia js. Here, you can learn how to authenticat...

Read More

Dec-05-2022

Laravel 8 Form Validation Example
Laravel 8 Form Validation Exam...

In this article, we will see the laravel 8 form validation example. form validation in laravel is a very common fun...

Read More

Oct-10-2020

How to Send Bulk Mail Using Queue in Laravel 9
How to Send Bulk Mail Using Qu...

In this article, we will see how to send bulk mail using queue in laravel 9. Laravel queue is used for sending bulk...

Read More

Mar-15-2022

How To Get Current Date And Time In Vue Js
How To Get Current Date And Ti...

In this article, we will see how to get the current date and time in vue js. In vue js very simple to get the current da...

Read More

Jan-14-2022