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
After
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.
