JavaScript Tutorial : How to Create Toggle Night / Day mode on the your webpage

What Will I Learn?

How to make Toggle Night mode by Javacript Function
How to make Toggle Day mode by Javacript Function

Requirement

Text Editor
Browser

In this tutorial I use Visual Studio code for Text editor and Google Crome For Web browser.

Difficulty

Intermediate

Tutorial Contents

Immediately, Lets Follow the following steps :

Open the text editor, then create sample template by html code and must contain two button in it, one for night togle and one other for day toggle. Or you can also use the sample template has made by me. Copy the code bellow, then paste on your text Editor and Save with html Extention, for example index.html.
Note : this Code I made using botstrap3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    (html comment removed: bootsrap mcdn)
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   (html comment removed:  end bootsrap mcdn)
    <title>Night / Day Mode</title>
</head>
<body id="body">
        <div class="container">
            <button type="button"  class="btn">NIGHT</button>
            <button type="button"  class="btn">DAY</button>
        <h3 class="text-center">NIGHT AND DAY MODE</h3>
        <h5 class="text-center">Clik the button for changing the mode</h5>  
        </div>
</body>
</html>

Add the css for the night and day. For the night you should use the dark background dan for day mode you use light background. Copy and paste the bellow code before </head>

<style>
        .night{
            background: black;
            color :white;
        }
        .day{
            background: white;
            color: black;
        }
    </style>

Then add onclick attribut on the button. first button with night() fucntion dan the second with day() function. the button code is become like this

<button type="button" onclick="night()" class="btn">NIGHT</button>
<button type="button" onclick="day()" class="btn">DAY</button>

Now, to activate the click function of the button we need to add the javascript code. With the javascript code we create the statement to change background anda text color. We will make two function here, night() and day(). The night() function will call the .night css and the day() function will call the .day css. You can paste the code bellow under </style>

    <script>
        function day(){
            body.className='day';
        }
        function night(){
            body.className='night';
        }
    </script>

Finish, The Toggle Night and Day mode is ready to use. Let try and run on our browser. When we click the night button the background become dark and when we click the day button the background become light.

For the full code you can download here or you can also copy bellow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    (html comment removed: bootsrap mcdn)
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   (html comment removed:  end bootsrap mcdn)
    <title>Night / Day Mode</title>
    <style>
        .night{
            background: black;
            color :white;
        }
        .day{
            background: white;
            color: black;
        }
    </style>
    <script>
        function day(){
            body.className='day';
        }
        function night(){
            body.className='night';
        }
    </script>
</head>
<body id="body">
        <div class="container">
            <button type="button" onclick="night()" class="btn">NIGHT</button>
            <button type="button" onclick="day()" class="btn">DAY</button>
        <h3 class="text-center">NIGHT AND DAY MODE</h3>
        <h5 class="text-center">Clik the button for changing the mode</h5>  
        </div>
</body>
</html>

Toggle night and day mode works by calling the class name of css. When the night button is clicked it will call the night class of css and when the day button on click will call the day class of css. Just this from me on this day, for more information you can contact me on discord with same name. Thanks.

Posted on Utopian.io - Rewarding Open Source Contributors