Hello readers, today in this blog I will create a Day-Night Mode On Card using only HTML & CSS. Earlier I have shared a How to Custom Radio Button using HTML & CSS now this I will build day-night mode.
In simple language, day mode means bright color like white color and night means dark color like black color. The main motive of day-night mode is to make user eyes healthier while they are using mobile or computer.
As you can see on the given image which is given on the webpage. This is the real image that I'm going to build in this program [Day Night Mode on Card], the left part of the image is "Day Mode" and the right part is the "Night Mode". Basically, at first, there is only one profile card in day mode condition, when we clicked the toggle this image transform into night mode. As you can see that toggle is placed on the top right side of the image.
If you want to see the real concept of this program [CSS Day Night Mode], I have provided a full video tutorial below. You will get all the concepts of this program after watching the video.
Full Video Tutorial of Day Night Mode using only HTML & CSS
As you have seen on the video tutorial of this program [Custom Checkbox Day Night Mode Toggle], In first there is only one card on the screen with one beautiful image and her name, a job some other details, and one button on the left side. On the button side, there are some social media icons with hover animation. The main part of this program's toggle button is placed on the top left side of this profile card. When I clicked on that toggle button its changed into day to night mode, To make this program [Day Night Mode], I have used the HTML checkbox only and for all the animation I have used CSS.
For those Friends who are feeling difficulty creating this program [Day Night Mode with HTML & CSS], I have provided the full source code below.
You Might Like This:
Day-Night Mode [Source Code]
To copy-paste the given code, you need to file on is HTML file and another is a CSS file. After creating these two files you can copy-paste all the code which are given below. You can also download all source code from the given "Download Button"
HTML CODE:
CSS CODE: