Breaking News: Grepper is joining You.com. Read the official announcement!

Create Dark And Light Mode Website Using jQuery

Adventurous Ant answered on July 5, 2022 Popularity 7/10 Helpfulness 3/10

answer Create Dark And Light Mode Website Using jQuery

Create Dark And Light Mode Website Using jQuery

Comment

<!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 - Techsolutionstuff</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: #000; 
        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; 
        }
      .dark h1{ 
        color: #fff;         
        } 
    </style> 
</head>   
<body> 
    <div class="mode"> 
        <b>Select Mode:</b><span class="change">OFF</span> 
    </div><br>     
    <div> 
      <h1><i>Techsolutionstuff</i></h1> 
        <p><i>We Give Best Tech 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>

Popularity 7/10 Helpfulness 3/10 Language javascript

Source: techsolutionstuff.com

Tags: javascript jquery light mode using

Link to this answer
Share Copy Link

Contributed on Jul 05 2022

Adventurous Ant

0 Answers Avg Quality 2/10

Create Dark And Light Mode Website Using jQuery

Contents

More Related Answers

Create Dark And Light Mode Website Using jQuery

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.