How to add Dark mode and Light mode feature in your website using html and Css

Home > HTML > Add Dark Mode And Light Mode Feature.

So this project is based on Dark mode,

With this feature, visitors to your website can easily toggle between a light mode and dark mode version of your site, providing a more personalized browsing experience.

To create a visually stunning dark mode version of your site, consider using dark color schemes and contrasting text colors. This will create a bold and modern look that is sure to catch the eye of your visitors.

Implementing a dark mode and light mode feature using HTML and CSS is a simple way to add a touch of modernity and personalization to your website. Give it a try and watch as your visitors rave about the sleek and stylish design !
Support me by Subscribing to my > YouTube channel.

It is important to know before start working on this project.

If your bring this project online, then should give us a credit at footer, because it takes alot time make all these kinds of projects now if you ask that I want to bring it online but I will not give any credits to the developers & the provider then it is very wrong man.But still if you want to bring it online but you don't want to give us an credit.Then mail us at somrajf12@gmail.com

HTML

First, Create an HTML file with the name of index.html and paste the code given below, in your HTML file. Remember, you’ve to create a file with .html extension.

Note*: Click on the HTML Code then press ctrl + A to select the whole HTML Code, then ctrl + C to copy.

<html lang="en">
<head>
<meta charset="UTF-8">
<title>East dark mode</title>
<link rel="stylesheet" type="text/css" href="style.css" /> 
</head>
<body>
<header>
<label  id="dark-change"></label>
</header>
<main>
<h1>Easy dark mode</h1>
<div class="respon">
<img src="darkmode.jpg">
<p>Write your text here ! Write your text here ! Write your text here ! Write your text here ! Write your text here ! Write your text here ! Write your text here ! Write your text here ! Write your text here ! Write your text here ! Write your text here ! Write your text here ! Write your text here ! Write your text here ! Write your text here ! Write your text here !</p>
</div>
</main>
<script>
        var content = document.getElementsByTagName('body')[0];
        var darkMode = document.getElementById('dark-change');
        darkMode.addEventListener('click', function(){
            darkMode.classList.toggle('active');
            content.classList.toggle('night');
        })
        </script>
        </body>
        </html>

Css

Second, Create a CSS file with the name of style.css and paste the code given below, in your CSS file. Remember, you’ve to create a file with .css extension.

Note*: Click on the Css Code then press ctrl + A to select the whole Css Code, then ctrl + C to copy.

body{
          margin: 0;
          padding: 0;
          font-family: sans-serif;
        }
        main{
          margin: 5vh 15%;
        }
        h1{
          font-size: 40px;
          font-weight: 400;
          text-align: center;
        }
        img{
          width:50%;
          height:auto;
        }
        p{
          text-align: justify;
          font-size: 18px;
        }
        label{
            position: absolute;
            width: 45px;
            height: 22px;
            right: 20px;
            top: 20px;
            border: 2px solid;
            border-radius: 20px;
        }
        label:before{
            position: absolute;
            content: '';
            width:20px;
            height: 20px;
            left: 1px;
            top: 1px;
            border-radius: 50%;
            background: #000;
            cursor: pointer;
            transition: 0.4s;
        }
        label.active:before{
            left: 24px;
            background: #fff;
        }
        body.night{
            background: #000;
            color: #fff;
        }
        @media screen and (min-width:900px) {
          .respon{
            display: flex;
          }
          img{
            height:50%;
            width:auto;
            padding-top: 3vh;
            padding-right: 5%;
          }
          p{
            max-width: 80%;
            line-height: 30px;
          }
        }

One-Tap to Get the File

Note*: After Clicking the Download button wait for sometime.
If the source file dosen't start to download, then allow this site to download files in your system.

Frequently Asked Questions

Q 1: Can I use this Source Code without giving credits ?

Ans: Yes, you can use but if your bring this projects, then should give us a credit at footer, because it takes alot time make all thess kinds of projects now if you ask that I want to bring it online but I will not give any credits to the developers & the provider then it is very wrong.

Q 2: Actually I want to bring this project online but I don't want to give credits ?

Ans: Ok, we have problem but also you cannot claim that it is made by you.
It is not all about flex you should increase you knowledge.

Q 3: If I am bringing this project online and not giving credits & claiming it is developed by me then ?

Ans: Ok, 1-3 times you will be warned and your that site will be suspended.
Still if you continue, then it can become to a legal things.