ButtonsTutorials

how to create a Day/Night Mode

how to create a Day/Night Mode

how to create a Day/Night Mode

Before We Start

Every developers need, clean and modern elements to develop their websites, It contain pictures and a user interface element within a website. The most important one and the first section that the user sees when he/she enters a website. how to create a Day/Night Mode

So if you are a person who wishes to develop a website, you have to know how to create that properly.

how to create a Day/Night Mode

We are here to solve your problem. In this article we discuss how to create this elements. Before we start please read the below articles which easier you to understand the process, if you are new to development.

Step 1 – Add HTML

It’s too easy and simple. Just copy and paste below code in your HTML editor between <body> </body> tag.

<div class="container">
  <div class="title">
    <h1>Dark/Night Mode</h1>
  </div>
  <div class="btn">
    <input type="checkbox" name="check" id="check">
    <label for="check">
      <div class="box">

        <div class="ball"></div>

        <div class="scenary">
          <div class="moon">
            <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 499.712 499.712" style="enable-background:new 0 0 499.712 499.712;" xml:space="preserve">
              <path style="fill:#FFD93B;" d="M146.88,375.528c126.272,0,228.624-102.368,228.624-228.64c0-55.952-20.16-107.136-53.52-146.88
                                             C425.056,33.096,499.696,129.64,499.696,243.704c0,141.392-114.608,256-256,256c-114.064,0-210.608-74.64-243.696-177.712
                                             C39.744,355.368,90.944,375.528,146.88,375.528z" />
              <path style="fill:#F4C534;" d="M401.92,42.776c34.24,43.504,54.816,98.272,54.816,157.952c0,141.392-114.608,256-256,256
                                             c-59.68,0-114.448-20.576-157.952-54.816c46.848,59.472,119.344,97.792,200.928,97.792c141.392,0,256-114.608,256-256
                                             C499.712,162.12,461.392,89.64,401.92,42.776z" />
              <g>
                <polygon style="fill:#FFD83B;" points="128.128,99.944 154.496,153.4 213.472,161.96 170.8,203.56 180.864,262.296 
                                                       128.128,234.568 75.376,262.296 85.44,203.56 42.768,161.96 101.744,153.4 	" />
                <polygon style="fill:#FFD83B;" points="276.864,82.84 290.528,110.552 321.104,114.984 298.976,136.552 304.208,166.984 
                                                       276.864,152.616 249.52,166.984 254.752,136.552 232.624,114.984 263.2,110.552 	" />
              </g>
            </svg>
          </div>
          <div class="sun">
            <?xml version="1.0" encoding="iso-8859-1"?>
            <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
            <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
              <g>
                <circle style="fill:#FFD347;" cx="255.997" cy="255.997" r="144.824" />
                <path style="fill:#FFD347;" d="M256,56.849c-4.273,0-7.737-3.463-7.737-7.737V7.737C248.263,3.463,251.727,0,256,0
                                               s7.737,3.463,7.737,7.737v41.376C263.737,53.386,260.273,56.849,256,56.849z" />
                <path style="fill:#FFD347;" d="M152.563,84.568c-2.674,0-5.274-1.387-6.707-3.869l-20.687-35.832
                                               c-2.136-3.7-0.869-8.432,2.832-10.569c3.701-2.134,8.432-0.87,10.569,2.832l20.687,35.832c2.136,3.7,0.869,8.432-2.832,10.569
                                               C155.206,84.234,153.876,84.568,152.563,84.568z" />
                <path style="fill:#FFD347;" d="M76.823,160.294c-1.312,0-2.643-0.334-3.861-1.038L37.13,138.569
                                               c-3.7-2.136-4.968-6.868-2.832-10.569c2.136-3.701,6.868-4.967,10.569-2.832l35.832,20.687c3.7,2.136,4.968,6.868,2.832,10.569
                                               C82.097,158.907,79.497,160.294,76.823,160.294z" />
                <path style="fill:#FFD347;" d="M49.112,263.737H7.737C3.464,263.737,0,260.274,0,256s3.464-7.737,7.737-7.737h41.376
                                               c4.273,0,7.737,3.463,7.737,7.737S53.385,263.737,49.112,263.737z" />
                <path style="fill:#FFD347;" d="M41.005,387.869c-2.674,0-5.274-1.387-6.707-3.869c-2.136-3.7-0.869-8.432,2.832-10.569
                                               l35.832-20.687c3.7-2.134,8.432-0.87,10.569,2.832c2.136,3.7,0.869,8.432-2.832,10.569l-35.832,20.687
                                               C43.648,387.535,42.317,387.869,41.005,387.869z" />
                <path style="fill:#FFD347;" d="M131.862,478.74c-1.312,0-2.643-0.334-3.861-1.038c-3.7-2.136-4.968-6.868-2.832-10.569
                                               l20.687-35.832c2.136-3.701,6.868-4.967,10.569-2.832c3.7,2.136,4.968,6.868,2.832,10.569l-20.687,35.832
                                               C137.136,477.352,134.536,478.74,131.862,478.74z" />
                <path style="fill:#FFD347;" d="M256,512c-4.273,0-7.737-3.463-7.737-7.737v-41.376c0-4.274,3.464-7.737,7.737-7.737
                                               s7.737,3.463,7.737,7.737v41.376C263.737,508.537,260.273,512,256,512z" />
                <path style="fill:#FFD347;" d="M380.138,478.74c-2.674,0-5.274-1.387-6.707-3.869l-20.687-35.832
                                               c-2.136-3.7-0.869-8.432,2.832-10.569c3.7-2.134,8.432-0.87,10.569,2.832l20.687,35.832c2.136,3.7,0.869,8.432-2.832,10.569
                                               C382.781,478.406,381.451,478.74,380.138,478.74z" />
                <path style="fill:#FFD347;" d="M470.995,387.869c-1.312,0-2.643-0.334-3.861-1.038l-35.832-20.687
                                               c-3.7-2.136-4.968-6.868-2.832-10.569c2.136-3.701,6.868-4.967,10.569-2.832l35.832,20.687c3.7,2.136,4.968,6.868,2.832,10.569
                                               C476.269,386.481,473.669,387.869,470.995,387.869z" />
                <path style="fill:#FFD347;" d="M504.263,263.737h-41.376c-4.273,0-7.737-3.463-7.737-7.737s3.464-7.737,7.737-7.737h41.376
                                               c4.273,0,7.737,3.463,7.737,7.737S508.536,263.737,504.263,263.737z" />
                <path style="fill:#FFD347;" d="M435.177,160.294c-2.674,0-5.274-1.387-6.707-3.869c-2.136-3.7-0.869-8.432,2.832-10.569
                                               l35.832-20.687c3.7-2.134,8.432-0.87,10.569,2.832c2.136,3.7,0.869,8.432-2.832,10.569l-35.832,20.687
                                               C437.82,159.96,436.489,160.294,435.177,160.294z" />
                <path style="fill:#FFD347;" d="M359.437,84.568c-1.312,0-2.643-0.334-3.861-1.038c-3.7-2.136-4.968-6.868-2.832-10.569
                                               l20.687-35.832c2.136-3.701,6.868-4.967,10.569-2.832c3.7,2.136,4.968,6.868,2.832,10.569l-20.687,35.832
                                               C364.711,83.181,362.11,84.568,359.437,84.568z" />
              </g>
              <path style="fill:#FFBE31;" d="M256,111.18c-5.242,0-10.418,0.286-15.516,0.828c72.685,7.743,129.303,69.252,129.303,143.991
                                             s-56.619,136.249-129.303,143.992c5.098,0.544,10.273,0.828,15.516,0.828c79.982,0,144.82-64.838,144.82-144.82
                                             S335.983,111.18,256,111.18z" />
            </svg>
          </div>
        </div>

      </div>
    </label>
  </div>

</div>

</div>

Step 2 – Add CSS

Copy and paste below code in your HTML editor between <style></style> tag.

<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
* body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  transition: all 1s ease;
  min-height: 100vh;
  font-family: 'Poppins';
}

.container {
  display: flex;
  flex-direction: column;
  width: 80%;
}
@media (min-width: 500px) {
  .container {
    width: 50%;
  }
}
.container .title {
  text-align: center;
}
.container input[type="checkbox"] {
  display: none;
}

.btn {
  align-self: center;
  margin: 15px 0;
}

.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 160px;
  height: 80px;
  background-color: black;
  transition: all 1s ease;
  position: relative;
  border-radius: 40px;
  cursor: pointer;
}
.box .ball {
  width: 80px;
  height: 80px;
  background-color: grey;
  transition: all 1s ease;
  position: absolute;
  border-radius: 50%;
  border: 3px solid black;
}
.box .scenary {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  transition: all 1s ease;
  padding: 5px 10px 0px 10px;
}
.box .scenary svg {
  width: 53.3333333333px;
}

</style>

Step 3 – Add JavaScript

And also copy and paste below JavaScript code between <script></script> tag.

<script>
// Selecting all the required classes from HTML to change 
var body = document.body
var check = document.querySelector('#check')
var box = document.querySelector('.box')
var ball = document.querySelector('.ball')


// Targeting my social media links********************
var youtube = document.querySelector('.youtube')
var instagram = document.querySelector('.instagram')


// Adding an eventListener function to change color everytime var check is changed.(checked & unchecked)

check.addEventListener('change',function(){

  //   conditions to apply when checkbox is checked

  if(this.checked == true){
    box.setAttribute('style','background-color:white;')
    ball.setAttribute('style','transform:translatex(100%);')
    body.setAttribute('style','background-color:black; color:white;') 




    // Targeting my social media links********************
    youtube.setAttribute('style','border:2px solid white;')
    instagram.setAttribute('style','border:2px solid white;')


  }

  //   conditions to apply when checkbox is unchecked

  if(this.checked == false){
    box.setAttribute('style','background-color:black; color:white;')
    ball.setAttribute('style','transform:translatex(0%);')
    body.setAttribute('style','background-color:white; color:black;')




    // Targeting my social media links********************
    youtube.setAttribute('style','border:2px solid black; color:black;')
    instagram.setAttribute('style','border:2px solid black;')
  }
})
</script>

At the end we will have something like this. You can change fonts, colors, backgrounds and all things that you want.Enjoy it.

Before

how to create a Day/Night Mode

After

how to create a Day/Night Mode

Video Tutorial

Please watch this video to better understand this tutorial and don’t forget to subscribe to our channel.


Help others to find out about this article on Social Media sites. If you have any doubt or any problem, don’t hesitate to contact us. Thereafter we will be able to help you and also make sure you bookmark our site on your browser.

Related Articles

Leave a Reply

Your email address will not be published.

Back to top button