How to Create Toggle Dark & Light Mode
with HTML & CSS
A flip button is a UI component that permits clients to switch between two states, for example, here and there. With regards to dull and light modes, a flip button would be utilized to switch between the two variety plans. Switch buttons can be found on many pages and applications, for example, the wifi flip button on Windows.
In the gave picture of the Dull/Light Switch Button, the button is in the "off" or "shut" state on the grounds that the blue circle is on the left side. Also, the foundation is blue, showing that the ongoing variety plot is the light mode. At the point when the switch button is clicked, the blue circle moves to the right side, and the variety conspire changes to the dull mode, as demonstrated by the adjustment of shade of the foundation and the flip button.
How to Create Toggle Dark & Light Mode with HTML & CSS | Video Tutorial
The entirety of the HTML and CSS code that I used to make this Dim/Light Mode is given. Rather than copying the code or downloading the source code record, I firmly encourage you to watch the full video clarification of this Switch Button Dim/Light Mode. By watching the video instructional exercise, you can make this Switch Button.
As you found in the video instructional exercise for this Switch Button with Dim/Light Mode, the underlying flip button was white with a lime green foundation and the site page was white. At the point when I tapped the switch button, the circle moved to one side and changed to dull, and the foundation of the body likewise different to dim with a pleasant liveliness.
Create Toggle Dark & Light Mode with HTML & CSS[Source Codes]
To Create Toggle Dark & Light Mode with HTML & CSS, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source codes.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Toggle Dark/Light Mode</title>
- <link rel="stylesheet" href="style.css">
- <!-- Font Awesome link for icons -->
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
- </head>
- <body>
- <input type="checkbox" id="dark-mode">
- <label for="dark-mode">
- <!-- Font Awesome icons using the <i> tag with appropriate classes -->
- <i class="fas fa-moon"></i>
- <i class="fas fa-sun"></i>
-
- </label>
-
- <div class="background"></div>
- </body>
- </html>
-
Now paste the following codes into your style.css file
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
-
- body {
- width: 100%;
- height: 100vh;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- }
- label {
- position: relative;
- width: 480px;
- height: 180px;
- display: block;
- background: #d9d9d9;
- border-radius: 100px;
- cursor: pointer;
- box-shadow: inset 0px 5px 15px rgba(0, 0, 0, 0.3), inset 0px -5px 15px rgba(255, 255, 255, 0.3);
- }
-
- label:after {
- content: '';
- position: absolute;
- height: 160px;
- width: 160px;
- background: #f2f2f2;
- border-radius: 100px;
- top: 10px;
- left: 10px;
- transition: 0.5s;
- box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
- }
- .fa-moon {
- color: #f1c40f;
- font-size: 100px;
- margin-left: 20px;
- }
-
- .fa-sun {
- color: #f39c12;
- font-size: 100px;
- margin-left: 230px;
- margin-top: 40px;
- }
- input {display: none;}
- input:checked ~ label:after {
- left: 470px;
- transform: translateX(-100%);
- background: linear-gradient(180deg, #777, #3a3a3a);
- }
-
- input:checked ~ label {background: #242424;}
- .background {
- position: absolute;
- width: 100%;
- height: 100vh;
- background: #fff;
- z-index: -1;
- transition: 0.5s;}
- input:checked + label + .background {
- background: #242424;
- }
-
-
If you face any difficulties while creating your Toggle Dark & Light Mode or your code is not working as expected, you can download the source code files for this Card for free by clicking on the download button.