Toggle Light/Dark Mode with Animations || Toggle Day/Night




Source Code

Step-1:

<body>
  <center>
    <p>click sun/moon to toggle</p>
    <div id="box">
      <input type="checkbox" id="toggle" onchange="changeMode()">
      <label for="toggle"></label>
    </div>
  </center>
</body>

It contains a centered message that says "click sun/moon to toggle," followed by a box in the center. Inside the box, there is a checkbox input element and a label element associated with it using the "for" attribute. When you click on the label (which is invisible), it toggles the state of the checkbox. This setup is typically used for creating a light/dark mode switch on a website, allowing users to switch between different visual themes by clicking on a sun or moon icon associated with the label. When the checkbox state changes, it triggers a JavaScript function called "changeMode()" that can be used to switch the website's theme or perform other actions based on the user's preference.

Step-2:

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

This code is a CSS (Cascading Style Sheets) snippet that sets some basic styles for all HTML elements in a web page. It uses the asterisk (*) selector to target every element on the page. It then sets the margin and padding to 0 pixels for all elements, ensuring there is no extra space around them. Additionally, it uses the "box-sizing" property set to "border-box," which means that an element's total width and height will include its border and padding, so you won't have to worry about those properties causing unexpected layout issues. Essentially, this code is a foundational step in creating a consistent and controlled layout for a web page.


Step-3:

body{
  background-color: rgb(123, 241, 250);
}

This code is written in CSS (Cascading Style Sheets) and is used to change the background color of a web page. In simple terms, it's telling the web browser to make the background color of the entire page a specific shade of blue-green. The numbers in the code, "rgb(123, 241, 250)," represent the amount of red, green, and blue in the color. So, in this case, it's creating a background color that's a mix of these three colors, resulting in a light blue-green color. When this code is applied to a webpage, the background of that webpage will appear in this specific shade of blue-green.

Step-4:

input{
  visibility: hidden;
}

This code is written in a style sheet language called CSS, which is used for styling web pages. In simple terms, it's telling the web browser to make something invisible on a web page. The "input" part suggests that this code is meant to affect HTML input elements like text boxes or buttons. The "visibility: hidden;" part is the instruction, and it means that the affected input element should be hidden from view on the web page, as if it's not there, even though it's still present in the webpage's code. This can be useful for hiding elements that you might want to reveal or use later through other interactions on the webpage.

Step-5:

label{
  display: inline-block;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: orange;
  border: 2px solid yellow;
  position: relative;
  top: 10vh;
  transition: all 0.5s;
}

This code defines a style for a HTML element with a label. It specifies how the label should look on a web page. The label will be displayed as a block of content, 50 pixels in height and 50 pixels in width, forming a circular shape with rounded corners. It will have an orange background color and a yellow border that is 2 pixels thick. The label is positioned relative to its normal position, shifting it 10% of the viewport height from the top. Additionally, any changes in the label's appearance will transition smoothly over a half-second duration when modified. Essentially, this code sets the visual properties and behavior of a label element in a web page.

Step-6:

label::before{
  content: "";
  display: inline-block;
  height: 15px;
  width: 50px;
  background-color: white;
  border-radius: 10px;
  position: relative;
  top: 20px;
  left: 20px;
  animation-name: cloud;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

This code is used in web development to create a label with a special visual effect. It defines the appearance of a label by adding a white rounded rectangle with specific dimensions (50 pixels wide and 15 pixels tall) before the label's text. The rectangle is positioned slightly to the top and left of the label's original position. Additionally, it applies an animation called "cloud" that lasts for 2 seconds and repeats indefinitely, creating a continuous, looping animation effect. This code can be used to make labels on a webpage more visually interesting by adding animated shapes next to them.

Step-7:

label::after{
  content: "";
  display: inline-block;
  height: 20px;
  width: 20px;
  background-color: white;
  border-radius: 10px;
  position: relative;
  top: -8px;
  left: 15px;
  box-shadow: 12px -2px 0 white;
  animation-name: cloud;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

This code is for a web design element, often used in CSS to style labels in a webpage. It creates a small white circle with a shadow that appears to be floating next to a label. The circle is 20 pixels in both height and width, with rounded corners, and it's positioned slightly above and to the left of the label's text. It also has a subtle animation called "cloud" that makes it move continuously, looping every 2 seconds. This code gives a decorative touch to labels, making them more visually appealing and engaging for users on a website.

Step-8:

input:checked + label{
  background-color: black;
  box-shadow: inset 15px 0px 0 white;
  border: none;
}

This code is for styling elements in HTML, specifically checkboxes and their associated labels. It's written in CSS (Cascading Style Sheets). When a checkbox input is checked (meaning it's ticked or selected), this code makes the label next to it change its background color to black, adds a white box shadow on the left side, and removes the border. Essentially, it's a visual indication to show that the checkbox is selected. So, when you click the checkbox, the label's appearance changes to reflect that it's associated with the checked checkbox.

Step-9:

input:checked + label::before{
  content: "*";
  color: white;
  height: 0px;
  width: 0px;
  animation-name: star;
  animation-duration: 0.5s;
  animation-direction: alternate;
}

This code is for a web page and is written in CSS, a language for styling web elements. It targets an HTML input element that has been checked by the user, and immediately after it, there should be a label element. When the input is checked, this code adds a white asterisk symbol (*) before the label. It also includes some animations, so the asterisk appears and disappears with a fading effect. Essentially, it's a visual enhancement for a checked input element on a webpage, making it more noticeable by adding a twinkling star animation before its associated label.

Step-10:

input:checked + label::after{
  content: "*";
  color: white;
  height: 0px;
  width: 0px;
  animation-name: star;
  animation-duration: 0.5s;
  animation-delay : 0.5s;
  animation-direction: alternate;
}

This code is used in web development to add a visual effect to a checkbox input element when it is checked. When the checkbox is checked, a label immediately following it will have a white asterisk (*) added after its content. The asterisk is not initially visible because its height and width are set to 0 pixels. Then, an animation named "star" is applied to this asterisk, making it gradually appear and disappear over a half-second (0.5 seconds) duration. The animation also has a delay of 0.5 seconds before starting and alternates its direction, giving the effect of a blinking asterisk when the checkbox is checked.

Step-11:

@keyframes cloud {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-10px);
  }
}

This code defines a CSS animation called "cloud." The animation involves changing the position of an element over time. At the beginning (0%), the element is not moved from its original horizontal position. However, by the end of the animation (100%), it will have moved 10 pixels to the left along the horizontal axis. This creates a visual effect of the element appearing to slide or drift to the left when the animation is applied to an HTML element. It's a simple animation that shifts an object from one position to another, making it look like a cloud is moving, for example.

Step-12:

@keyframes star {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

This code is defining a set of animation instructions for a CSS keyframe animation called "star." In simple terms, it tells a web browser how an element should change over time. The animation starts at 0% and sets the initial state of an element to its regular size (scale 1), and then it gradually increases the size to 1.1 times its original size when it reaches 100% of the animation. So, when this animation is applied to an element, it will make that element slowly grow bigger from its normal size to 10% larger.

Step-13:

.dark{
  background-color: black;
  color: white;
}

This code is for a webpage, and it defines a style called ".dark." It tells the webpage that any element with this class should have a black background and white text color. So, when you apply this style to something on the webpage, it will make that part of the page have a black background with white text, which can create a dark theme or look for that specific element. This is useful for changing the visual appearance of specific parts of a webpage to make them more visually appealing or easier to read in low-light conditions.

Step-14:

<script>
function changeMode(){
  document.body.classList.toggle("dark");
}
</script>

This short block of code is written in JavaScript and is used to change the mode of a web page. It defines a function called "changeMode." When this function is called, it toggles (switches back and forth) a CSS class called "dark" on the HTML body element. This class is likely used to control the styling of the web page, such as changing the background color, text color, or other visual elements to create a dark mode or night mode for the website. So, when you trigger this function, it changes the appearance of the webpage to a dark-themed version, and if you call it again, it will switch back to the regular (light) mode.


---END---

Comments

Post a Comment