Toggle day night mode using HTML CSS and Javascript

byCodingFlicks -September 25, 2020

0

Toggle day night mode using HTML CSS and Javascript

Hello Friends, Today, I will share a snippet based on Creating simple Toggle day and night mode on your webpage. Previously I have shared a snippet on how to create a bark neumorphism login form. Check that one out if you haven't already.

In this Project, we will simple HTML, CSS, and javascript to create two buttons, and the background color of the body element will switch between dark and white mode. I have bootstrap and jquery CDN library for this snippet, and I added those files below for your convenience.

In the HTML markup, we will give the body tag an id named "body." Inside the body element, I took a bootstrap container class and created two different div elements. The first div named 'btn-area' will contain the buttons we will use to create the dark and white background. I have two inline on click events in the controls. One is 'dark(),' and the other one is 'white().' I also added dark and white text for the respective buttons. The second div element named 'text-content' i have taken one ht and h3 tags, where I put some random text.

You make also like:

I have styled two different class name 'dark' and 'white' in the CSS part. For the white class, the text will be black and opposite for the dark type. I set a transition value of .9s for a smooth transition. After that, I did some basic styling for the rest of the elements like buttons, h2, and h3 tags.

In the js part, for each inline on click events, the relevant styles will be initiated by clicking the respective buttons. For instance, if someone clicks on the white button, the background will be white, and the text color will be black, and the opposite will happen for the other button.

REQUIRED FILES

<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

<body id="body">
  
     <div class="container">
         <div class="btn-area">
             <button type="button" onclick="dark()" class="btn">DARK</button>
             <button type="button" onclick="white()" class="btn">WHITE</button>
         </div>
         <div class="text-content">
             <h2>CodingFlicks</h2>
             <h3>Free HTML CSS JS Resources</h3>
         </div>
     </div>
  </body>

CSS

button{
color: #000;
}
.dark{
background: #000;
color: #fff;
font-weight: bold;
transition: .9s;
}
.white{
background: #fff;
color: #000;
font-weight: bold;
transition: .9s;
}
.btn-area{
height: 92px;
width: 220px;
right: -105px;
top: 35%;
z-index: 1000;
transform: rotate(-90deg);
position: fixed;
}
.text-content{
padding-top: 15%;
}
.text-content h2{
font-size: 130px;
font-family: lato;
text-align: center;
letter-spacing: 5px;
}
.text-content h3{
font-size: 40px;
font-family: lato;
text-align: center;
}

JS

function white(){
            body.className='white';
        }
    
        function dark(){
            body.className='dark';
        }

I hope you like this Simple snippet. Please stay connected and keep visiting us for the new posts.

Please do not enter any spam link in the comment box.