How To Create Dark and Light Mode Website using jQuery

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

Hello Friends,

In this tutorial i will show you How To Create Dark and Light Mode Website using jQuery.

As you can see many website and mobile applications are provide light theme as well as dark theme to user,It is useful for websites which have long content and requires users to focus on the screen for a long time. We can see Dark and Light Mode features are very useful for user specially when your website have more content or text, So, here we will see how to add dark and light mode in website step by step.
 

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

 

Featured Post




Follow us
facebooklogo github instagram twitter