JavaScripts Magic
Home  »  Elements • SWITCHES   »   Night & Day Mode Toggle Switch With HTML, CSS & JS

Night & Day Mode Toggle Switch With HTML, CSS & JS

Night & Light Button HTML, CSS, JS

Hey Programmers! In this blog post, we will make an Awesome Night & Day Mode Toggle Switch With Pure HTML, and CSS without using javascript. This is the most included feature by the web developers on websites.

This project allows you to create a minimal Night & Day Mode Toggle Switch so that users can seamlessly switch between light & dark themes.

Also Read: Light Bulb Switch With HTML & CSS

I will explain important CSS & HTML code step by step with code boxes so that you can create such projects on your own. In the end, I will share the entire source code to run this awesome project on your local device.

Joinn Telegram

Concepts Used To Make Night & Day Mode Toggle Switch

  1. HTML Switch
  2. CSS Box Model
  3. HTML Check Input
  4. CSS Positions & Box Shadow
  5. CSS Transition

Understanding HTML To Make Night & Day Mode Switch

The HTML sets up the structure for the toggle switch. The wrapper the class centers the switch on the page. Inside the wrapper, there is a toggle element that contains an input checkbox, a background div, and the switch elements.

<div class="wrapper">
    <div class="toggle">
        <input class="toggle-input" type="checkbox" />
        <div class="toggle-bg"></div>
        <div class="toggle-switch">
            <div class="toggle-switch-figure"></div>
            <div class="toggle-switch-figureAlt"></div>
        </div>  
    </div>
</div>
  1. <div class="wrapper">: This div wraps the entire switch, positioning it on the page.
  2. <div class="toggle">: The main container for the toggle switch.
  3. <input class="toggle-input" type="checkbox" />: The actual checkbox input that will be styled and hidden.
  4. <div class="toggle-bg"></div>: Acts as the background of the switch, changing color when toggled.
  5. <div class="toggle-switch">: Contains the switch that moves left and right.
    1. <div class="toggle-switch-figure"></div>: A decorative figure, part of the switch design.
    2. <div class="toggle-switch-figureAlt"></div>: Another decorative element that changes when the switch is toggled.

Also Read: Simple Minimal Toggle Switch With HTML & CSS

Understanding CSS To Make Night & Day Mode Switch

The CSS is responsible for the switch’s visual appearance and animation effects. It uses modern CSS features like variables, pseudo-elements, and transitions.

Basic Body and Wrapper Styles

These styles set up a neutral background and center the toggle on the page.

body {
    background-color: #F3F3F3;
}

.wrapper {
    padding-top: 40px;
    text-align: center;
}
  1. body: A light gray background is set for the entire page.
  2. wrapper: Adds padding to position the toggle vertically and centers it horizontally.

Toggle Container

The .toggle class defines the basic dimensions and position of the switch. It includes padding and a border-radius to make the switch appear rounded.

.toggle {
    position: relative;
    display: inline-block;
    width: 100px;
    margin-left: 100px;
    padding: 4px;
    border-radius: 40px;
}
  1. position: relative: This allows for absolutely positioned child elements within the toggle.
  2. display: inline-block: Makes the element fit to its content and allows for margin and padding to be applied.
  3. border-radius: 40px: Rounds the corners, giving the switch a pill shape.

Pseudo-Elements for Toggle

The :before and :after pseudo-elements clear floats, ensuring proper layout of the inner elements.

.toggle:before,
.toggle:after {
    content: "";
    display: table;
}

.toggle:after {
    clear: both;
}
  1. content: "": Adds an empty content that helps in layout purposes.
  2. display: table: Ensures the pseudo-elements participate in the layout as table elements.
  3. clear: both: Ensures no floating elements affect the layout of the toggle switch.

Toggle Background

The background of the toggle is styled with a light blue color, rounded edges, and a border. The transition property makes it smoothly animate when the state changes.

.toggle-bg {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 100%;
    height: 100%;
    background-color: #C0E6F6;
    border-radius: 40px;
    border: 4px solid #81C0D5;
    transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
  1. position: absolute: Allows for precise positioning relative to the parent.
  2. background-color: #C0E6F6: Light blue background for the toggle.
  3. border-radius: 40px: Rounds the edges to match the container.
  4. transition: Smoothly animates changes.

Hidden Checkbox

The checkbox input is hidden from view but still accessible. It covers the entire toggle area and is positioned on top of other elements with a z-index of 2.

.toggle-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0;
}
  1. opacity: 0: Makes the checkbox invisible while keeping it interactive.
  2. z-index: 2: Places the checkbox on top of other elements.

Toggle Switch

The switch that moves is styled as a yellow circle with a border. It also has transitions for smooth movement.

.toggle-switch {
    position: relative;
    width: 40px;
    height: 40px;
    margin-left: 50px;
    background-color: #F5EB42;
    border: 4px solid #E4C74D;
    border-radius: 50%;
    transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
  1. border-radius: 50%: Creates a circular shape.
  2. transition: Smoothly animates changes in position and appearance.

Switch Figures

The .toggle-switch-figure and .toggle-switch-figureAlt elements are decorative, adding visual flair to the switch. They use pseudo-elements to create complex shapes and animations.

.toggle-switch-figure {
    position: absolute;
    bottom: -14px;
    left: -50px;
    width: 80px;
    height: 30px;
    border: 8px solid #D4D4D2;
    border-radius: 20px;
    background-color: #fff;
    transform: scale(0.4);
    transition: all 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.toggle-switch-figure:after,
.toggle-switch-figure:before {
    content: "";
    display: block;
    position: absolute;
    background-color: #fff;
    border: 8px solid #D4D4D2;
    border-radius: 100%;
    background-color: #fff;
    border-right-color: transparent;
    border-bottom-color: transparent;
}
  1. border-radius: 20px: Gives a rounded rectangular shape.
  2. transform: scale(0.4): Scales the element down.
  3. border-right-color: transparent: Makes part of the border transparent to create a cut-out effect.
.toggle-switch-figureAlt {
    position: absolute;
    top: 5px;
    left: 2px;
    width: 2px;
    height: 2px;
    background-color: #EFEEDA;
    border-radius: 100%;
    border: 4px solid #DEE1C5;
    box-shadow: 42px -7px 0 -3px #FCFCFC, 75px -10px 0 -3px #FCFCFC, 54px 4px 0 -4px #FCFCFC, 83px 7px 0 -2px #FCFCFC, 63px 18px 0 -4px #FCFCFC, 44px 28px 0 -2px #FCFCFC, 78px 23px 0 -3px #FCFCFC;
    transition: all 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: scale(0);
}
  1. box-shadow: Creates multiple shadows for a complex visual effect.
  2. transform: scale(0): Initially hides the element.

Checked State Styling

When the checkbox is checked, these styles apply, moving the switch and changing the background and border colors.

.toggle-input:checked ~ .toggle-switch {
    margin-left: 0;
    border-color: #DEE1C5;
    background-color: #FFFDF2;
}

.toggle-input:checked ~ .toggle-bg {
    background-color: #484848;
    border-color: #202020;
}

.toggle-input:checked ~ .toggle-switch .toggle-switch-figure {
    margin-left: 40px;
    opacity: 0;
    transform: scale(0.1);
}

.toggle-input:checked ~ .toggle-switch .toggle-switch-figureAlt {
    transform: scale(1);
}
  1. .toggle-input:checked ~ .toggle-switch: Moves the switch to the left and changes its color.
  2. **`.toggle-input:checked ~ .toggle-bg`**: Changes the background and border color.
  3. .toggle-input:checked ~ .toggle-switch .toggle-switch-figure: Hides the main figure.
  4. .toggle-input:checked ~ .toggle-switch .toggle-switch-figureAlt: Shows the alternative figure.

Source Code Of Night & Day Mode Switch

HTML:

<div class="wrapper">

    <div class="toggle">

      <input class="toggle-input" type="checkbox" />

      <div class="toggle-bg"></div>

      <div class="toggle-switch">

        <div class="toggle-switch-figure"></div>

        <div class="toggle-switch-figureAlt"></div>

      </div>  

    </div>

  </div>

CSS:

<style>

body {

  background-color: #F3F3F3;

}

.wrapper {

  padding-top: 40px;

  text-align: center;

}

.toggle {

  position: relative;

  display: inline-block;

  width: 100px;

  margin-left: 100px;

  padding: 4px;

  border-radius: 40px;

}

.toggle:before,

.toggle:after {

  content: "";

  display: table;

}

.toggle:after {

  clear: both;

}

.toggle-bg {

  position: absolute;

  top: -4px;

  left: -4px;

  width: 100%;

  height: 100%;

  background-color: #C0E6F6;

  border-radius: 40px;

  border: 4px solid #81C0D5;

  transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}

.toggle-input {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  border: 1px solid red;

  border-radius: 40px;

  z-index: 2;

  opacity: 0;

}

.toggle-switch {

  position: relative;

  width: 40px;

  height: 40px;

  margin-left: 50px;

  background-color: #F5EB42;

  border: 4px solid #E4C74D;

  border-radius: 50%;

  transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}

.toggle-switch-figure {

  position: absolute;

  bottom: -14px;

  left: -50px;

  display: block;

  width: 80px;

  height: 30px;

  border: 8px solid #D4D4D2;

  border-radius: 20px;

  background-color: #fff;

  transform: scale(0.4);

  transition: all 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}

.toggle-switch-figure:after {

  content: "";

  display: block;

  position: relative;

  top: -65px;

  right: -42px;

  width: 15px;

  height: 15px;

  border: 8px solid #D4D4D2;

  border-radius: 100%;

  border-right-color: transparent;

  border-bottom-color: transparent;

  transform: rotateZ(70deg);

  background-color: #fff;

}

.toggle-switch-figure:before {

  content: "";

  display: block;

  position: relative;

  top: -25px;

  right: -10px;

  width: 30px;

  height: 30px;

  border: 8px solid #D4D4D2;

  border-radius: 100%;

  border-right-color: transparent;

  border-bottom-color: transparent;

  transform: rotateZ(30deg);

  background-color: #fff;

}

.toggle-switch-figureAlt {

  content: "";

  position: absolute;

  top: 5px;

  left: 2px;

  width: 2px;

  height: 2px;

  background-color: #EFEEDA;

  border-radius: 100%;

  border: 4px solid #DEE1C5;

  box-shadow: 42px -7px 0 -3px #FCFCFC, 75px -10px 0 -3px #FCFCFC, 54px 4px 0 -4px #FCFCFC, 83px 7px 0 -2px #FCFCFC, 63px 18px 0 -4px #FCFCFC, 44px 28px 0 -2px #FCFCFC, 78px 23px 0 -3px #FCFCFC;

  transition: all 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  transform: scale(0);

}

.toggle-switch-figureAlt:before {

  content: "";

  position: absolute;

  top: -6px;

  left: 18px;

  width: 7px;

  height: 7px;

  background-color: #EFEEDA;

  border-radius: 100%;

  border: 4px solid #DEE1C5;

}

.toggle-switch-figureAlt:after {

  content: "";

  position: absolute;

  top: 19px;

  left: 15px;

  width: 2px;

  height: 2px;

  background-color: #EFEEDA;

  border-radius: 100%;

  border: 4px solid #DEE1C5;

}

.toggle-input:checked ~ .toggle-switch {

  margin-left: 0;

  border-color: #DEE1C5;

  background-color: #FFFDF2;

}

.toggle-input:checked ~ .toggle-bg {

  background-color: #484848;

  border-color: #202020;

}

.toggle-input:checked ~ .toggle-switch .toggle-switch-figure {

  margin-left: 40px;

  opacity: 0;

  transform: scale(0.1);

}

.toggle-input:checked ~ .toggle-switch .toggle-switch-figureAlt {

  transform: scale(1);

}

  </style>

Last Updated: June 18, 2024

By JSM Hemant

About Author

Hello, Myself Hemant. I Am Web Developer & Likes To Create Awesome Projects By Using MERN, Java, Python, C++. In This Website You Will Get Cool Projects Made With Above Technologies With Full Source Code. You Can Also Follow This Website On Author Social Media:

Leave a Reply

Your email address will not be published. Required fields are marked *

Categories

Recent Posts