Dark/Light Mode – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Fri, 12 May 2023 05:30:09 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Create Toggle Dark/Light Mode in HTML & CSS https://www.codingnepalweb.com/toggle-button-dark-light-mode-htm-css/ https://www.codingnepalweb.com/toggle-button-dark-light-mode-htm-css/#respond Tue, 13 Dec 2022 21:11:21 +0000 https://www.codingnepalweb.com/?p=4130 Create Toggle Dark/Light Mode in HTML & CSS

Previously, we usually had a light theme for our web and mobile platforms. But now, dark mode is gaining popularity. Many desktop and mobile app platforms are embracing the dark theme because it is more comfortable to look at and saves battery life on mobile devices.

This blog will teach you how to create Toggle Button in Dark/Light Mode HTML and CSS. In my recent blog post, I have provided  Top 10 Website Templates Design, which could also enhance your skills in HTML CSS as well as JavaScript.

Although the light theme has some benefits, many people still need to learn to use dark-themed websites. Therefore, it would be advisable to provide users with the ability to switch between dark and light modes in web applications. This way, they can choose the theme that works best for them.

A toggle button is a user interface element that allows users to switch between two states, such as on and off. In the context of dark and light modes, a toggle button would be used to switch between the two color schemes. Toggle buttons can be found on many web pages and apps, such as the wifi toggle button on Windows.

In the provided image of the Dark/Light Toggle Button, the button is in the “off” or “closed” state because the blue circle is on the left side. Additionally, the background is blue, indicating that the current color scheme is the light mode. When the toggle button is clicked, the blue circle moves to the right side, and the color scheme changes to the dark mode, as indicated by the change in color of the background and the toggle button.

If you’re curious about how the Dark/Light Toggle Button works, take a look at the preview I have provided below. I have explained the HTML and CSS code I used to make this Toggle Button and its Dark/Light Mode.

Toggle Button Dark/Light Mode in HTML CSS | Video Tutorial

All of the HTML and CSS code that I used to create this Dark/Light Mode is provided. Instead of duplicating the code or downloading the source code file, I strongly advise you to watch the full video explanation of this Toggle Button Dark/Light Mode. By watching the video tutorial, you can create this Toggle Button.

As you saw in the video tutorial for this Toggle Button with Dark/Light Mode, the initial toggle button was white with a lime green background and the webpage was white. When I clicked the toggle button, the circle moved to the right and changed to dark, and the background of the body also changed to dark with a nice animation.

Now, hopefully, you can create this Toggle Button Dark/Light Mode using HTML and CSS. The source codes for all the HTML and CSS I used to develop this Input Label Animation are provided below.

You May Like This:

Toggle Button Dark/Light Mode in HTML & CSS [Source Code]

To create Toggle Dark/Light Mode, follow the given steps line by line:
  1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
  2. Create an index.html file. The file name must be index and its extension .html
  3. 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 Toggle Button Dark/Light by clicking on the given download button.

First, paste the following codes into your index.html file.

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> Toggle Button With Dark/Light Mode | CoderGirl</title>
  <!---Custom CSS File--->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <input type="checkbox" id="dark-mode">
  <label for="dark-mode"></label>
  <div class="background"></div>
</body>
</html>

Second, paste the following codes into your style.css file

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
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);
}
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;
}
input{
  display: none;
}

That’s all, now you’ve successfully created a project on Toggle Button Dark/Light Mode. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.

 

]]> https://www.codingnepalweb.com/toggle-button-dark-light-mode-htm-css/feed/ 0 Toggle Button Dark Light Mode in HTML CSS & JavaScript LocalStorage https://www.codingnepalweb.com/toggle-button-dark-light-mode-html-css-javascript/ https://www.codingnepalweb.com/toggle-button-dark-light-mode-html-css-javascript/#respond Fri, 16 Sep 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4160 Toggle Button Dark Light Mode in HTML CSS & JavaScript LocalStorage

Hello buddy, I hope you are doing and creating mind-blowing projects using HTML, CSS, and JavaScript. Today on this blog, you are going to learn how to make a toggle button with dark and light modes using HTML, CSS, and JavaScript. I have also used local storage to keep the selected mode while we refresh the page or reopen the file. Earlier I have made a Simple Toggle Button, I hope you have liked it.

A toggle button is the type of button used to turn on or off. The dark and light modes are the color appearance of the page. We can see on many webpages and apps that they use this type of toggle button. For example, on Windows, we can see this button in the wifi section, where we use this toggle button to turn on or off the wifi.

Have a look at the given image of our project [Toggle Button Dark Light Mode]. As you can see in the image, there is a toggle button in close or off status because the blue circle is on the left side. Similarly, our background is also in blue, so this is our light mode. When we click on the toggle section, the blue circle moves to the right side and its color and background color change into dark mode, which will be called dark mode.

For the demo of this project and all the HTML, CSS, and JavaScript code that I have used to create this project [Toggle Button Dark Light Mode ], watch the given video tutorial. After watching the given video tutorial, you will get an idea of how all the HTML, CSS, and JavaScript codes are working behind this project.

Toggle Button Dark Light Mode in JavaScript | LocatStorage

I have provided all the HTML CSS & JavaScript code that I have used to create this project [Toggle Button with Dark Light Mode], but before getting into the source code, I would be delighted to berifly explain the given video tutorial.

As you have seen on the video tutorial [Toggle Button with Dark Light Mode]. At first, there was a toggle button with blue circle with white background on it, similarly the full wepage color was also blue. When I clicked on the toggle button the toggle’s circle moves to right side and it’s color also changed into dark, similarly the background of the body was also changed into dark with a beautiful animation.

I had refreshed the page and reopened that file in an another tab but the selected mode did not change to make this I used localstorage and the UI design of the toggle button is made by HTML and CS, to toggle that button I used some JavaScript code.

Now I believe that you can create this type of toggle button and also the dark and light mode by using HTML CSS and JavaScript. If you are feeling difficult to build this project [Toggle Button with Dark Light Mode], I have provided all the HTML CSS and JavaScript code below.

You May Like This:

Toggle Button with Dark Light Mode [Source Code]

To get the following HTML and CSS code for Social Media Navigation Button. You need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Toggle Button with Dark/Light Mode</title>
    <!-- CSS -->
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="toggle"></div>

    <!-- JavaScript -->
    <script>
      const body = document.querySelector("body"),
        toggle = document.querySelector(".toggle");

      let getMode = localStorage.getItem("mode");
      if (getMode && getMode === "dark") {
        body.classList.add("dark");
        toggle.classList.add("active");
      }

      toggle.addEventListener("click", () => {
        body.classList.toggle("dark");

        if (!body.classList.contains("dark")) {
          return localStorage.setItem("mode", "light");
        }
        localStorage.setItem("mode", "dark");
      });

      toggle.addEventListener("click", () => toggle.classList.toggle("active"));
    </script>
  </body>
</html>


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #4070f4;
  transition: all 0.3s ease-in-out;
}
body.dark {
  background-color: #18191a;
}
.toggle {
  position: relative;
  height: 130px;
  width: 300px;
  border-radius: 100px;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.toggle::before {
  content: "";
  position: absolute;
  height: 110px;
  width: 110px;
  background: #4070f4;
  border-radius: 50%;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  transition: all 0.3s ease-in-out;
}
.toggle.active::before {
  background-color: #18191a;
  left: calc(100% - 110px - 14px);
}ont-family: 'Poppins', sans-serif;
}

If you face any difficulties while creating your Toggle Button or your code is not working as expected, you can download the source code files for this Toggle Button for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

View Live Demo

 

]]> https://www.codingnepalweb.com/toggle-button-dark-light-mode-html-css-javascript/feed/ 0