Toggle day night mode using HTML CSS and Javascript

byCodingFlicks -September 25, 2020

0

Day-night mode or light-dark mode is a special feature that allows visitors to switch between two visual themes. One of them is light or day mode, where the user sees a light or white background with dark text on it. The other is dark or night mode, where the user sees a dark or black background with light or white text on it. The former is the default for most websites, while the latter is better for the eyes in low-light environments. The toggle option is often represented by a button or icon, such as the moon or sun, or a switch located in the website header. Today, in this blog post, we shared a snippet of a basic day-night toggle widget. Below is a video tutorial that shows how to create this JavaScript snippet. Please watch the video tutorial before collecting the source code.

Video tutorial:

We hope you enjoyed the video tutorial on how to toggle day-night mode using HTML, CSS, and JavaScript. This technique in the web design process will help people with visual impairments or light sensitivity. It also reduces eye strain for the user. Some users simply prefer one mode over the other, which is why adding this option to your website can give users control over their environment and also increase comfort. We often find this widget useful in various blogs and reading platforms, dashboards or admin panels, developer tools and code editors, social media apps, or e-commerce stores, etc. Famous websites like YouTube, Twitter(X), Reddit, GitHub, Facebook, Stack Overflow, etc. use this feature.

In the HTML markup, we have given the body tag an ID called "body". Inside the body element, we have taken a Bootstrap container class and created two different div elements. The first div is called 'btn-area', which contains the buttons that we will use to create the dark and white backgrounds. We have two inline on-click events on the controls. One is 'dark(),' and the other is 'white(). We have also added dark and white text for the respective buttons. The second div element is called 'text-content'. We have taken an H2 and an H3 tag, where we have placed some random text.

We have styled two different class names in the CSS part, 'dark' and 'white'. For the white class, the text will be black, and the opposite for the dark type. We have set a transition value of .9s for a smooth transition. After that, we have done some basic styling for the remaining elements like the button, h2, and h3 tags. In the JS part, for each inline on-click event, the relevant styles will be triggered by clicking on the corresponding buttons. For example, if someone clicks on the white button, the background will be white, the text color will be black, and the opposite will happen for the other buttons.

You May Also like:

JavaScript toggle day-night mode [ Source Code ]:

To create this JavaScript Toggle Day-Night Mode project, you need to create an HTML, CSS, and a JS file. Next, copy the code from the code box below and paste it into your files. If you want, you can also download the code by clicking the download button below this blog post.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->     
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle day night mode using HTML CSS and Javascript</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">    
    <link rel="stylesheet" href="style.css">
</head>
<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>



    <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>
    <script>
        function white() {
            body.className = 'white';
        }

        function dark() {
            body.className = 'dark';
        }
    </script> 
</body>
</html>

ADD 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;
}

Day-night mode or light-dark mode toggle is a great and useful feature in modern web design. It increases usability and comfort, hence it is widely adopted by many leading platforms. We hope you have collected the source code. For more source code, click on the "Load More" button on our homepage. Thanks for visiting our website.

DOWNLOAD CODE

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