Pure CSS Day and Night Mode Toggle Button

Spread the love

Nowadays, dark mode is a popular UI feature that reduces eye strain in low light conditions. This feature has been adopted by many websites including Google and Facebook to provide the best user experience at night. Basically, a JavaScript function is required to toggle between dark mode and light mode. But if I say it’s quite possible to create a day and night mode toggle button with a style switch using pure CSS, will you be surprised?

Well! it’s absolutely possible to create night mode functionality using HTML checkbox and CSS. The trick is that we’ll create a checkbox input and place it at the top of the page (or container). Then we’ll style that input as a toggle button and switch to the dark mode on input checked event. You can check the final output on the demo page to toggle between day and night mode.

In this tutorial, we are going to create a basic app interface in which users can toggle between day and night mode. I know you have a different layout and HTML structure in which you want to add the night mode feature. But don’t worry, you can implement this toggle button into your project with your own dark mode styles. So, let’s get started with HTML to create night mode.

The HTML Structure

In HTML, create an input element with the type "checkbox" and define the "switch" id attribute. Place this input tag at the top of your content container. Likewise, create a label element for this input and place it where you want to show the night mode toggle button. Create two div elements with class names "toggle" and "names" respectively.

Place “Light” and “Dark” text wrapping with p element inside the "names" div and close the label tag. We’ll style this label element as a toggle button.

<input type="checkbox" id="switch">

<label for="switch">
   <div class="toggle"></div>
   <div class="names">
     <p class="light">Light</p>
     <p class="dark">Dark</p>
   </div>
</label>

Basically, you only need to create a toggle button. Anyhow, if you want to create an app interface as shown on the demo page, then you can use the following HTML structure:

<input type="checkbox" id="switch">
<div class="app">
  <div class="body">
    <div class="main-circle"></div>
    <div class="phone">
    <!-- Top -->
      <div class="menu">
        <div class="time">4:20</div>
        <div class="icons">
          <div class="network"></div>
          <div class="battery"></div>
        </div>
      </div>
    <!-- Middle -->
      <div class="content">
        <div class="circle">
          <div class="crescent"></div>
        </div>
        <p class="heading">Choose a style</p>
        <p>Pop or subtle. Day or night.<br>
          Customize your interface
        </p>
        <label for="switch">
          <div class="toggle"></div>
          <div class="names">
            <p class="light">Light</p>
            <p class="dark">Dark</p>
          </div>
        </label>
        
        <div class="mark"></div>
      </div>
     <!-- Bottom --> 
      <div class="skip">
        <p>Skip</p>
        <div class="fab">
          <div class="arrow"></div>
        </div>
      </div>
      
      <div class="swipe"></div>
    </div>
  </div>

</div>

If you want to add your content inside the above interface, simply insert your content inside the <div class="content"> element.

The CSS Styles

In CSS, target the "body" class that is the main wrapper for the app interface. Define relative position and white background, define overflow, display, and transition properties with the following values:

.body {
  position: relative;
  background-color: #fff;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color .1s;
}

After that, create the CSS style for the main circle. Basically, it’s an optional element, you can style it according to your needs.

/* Main Circle */
.main-circle {
  width: 40rem;
  height: 40rem;
  border-radius: 100%;
  background: linear-gradient(40deg, #FF0080,#FF8C00 70%);
  position: absolute;
  z-index: 1;
  left: 50%;
  transform: translate(-50%, -70%)
}

Select the "phone" class and define its relative position. Similarly, define its dimension, border, display, and flex-direction property as defined below:

.phone {
  position: relative;
  z-index: 2;
  width: 21rem;
  height: 45rem;
  background-color: inherit;
  box-shadow: 0 4px 35px rgba(0,0,0,.1);
  border-radius: 40px;
  display: flex;
  flex-direction: column;
}

Likewise, define basic styles for a mobile interface, swipe, menu, icons, battery, and network, etc as follows:

.swipe {
  width: 40%;
  height:.25rem;
  background-color: black;
  opacity: .15;
  border-radius: 10px;
  margin: .5rem auto;
}

/* Top */
.menu {
  font-size: 80%;
  opacity: .4;
  padding: .8rem 1.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.icons {
  display: flex;
  margin-top: .5rem;
}
.battery {
  width: .85rem;
  height: .45rem;
  background-color: black;
}
.network {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6.8px 7.2px 6.8px;
  border-color: transparent transparent black transparent;
  transform: rotate(135deg);
  margin: .12rem .5rem;
}

Target the "content" class and specify styles for the middle area of the mobile.

/* Middle */
.content {
  display: flex;
  flex-direction: column;
  margin: auto;
  text-align: center;
  width: 70%;
  transform: translateY(5%);
}
.circle {
  position: relative;
  border-radius: 100%;
  width: 8rem;
  height: 8rem;
  background: linear-gradient(40deg, #FF0080,#FF8C00 70%);
  margin: auto;
}
.crescent {
  position: absolute;
  border-radius: 100%;
  right: 0;
  width: 6rem;
  height: 6rem;
  background: white;
  transform: scale(0);
  transform-origin: top right;
  transition: transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

The following are the basic styles for the typography. You can set custom values in order to customize headings and paragraphs.

p { 
  font-size: 90%;
}
.heading {
  font-size: 140%;
  font-weight: bolder;
  margin: 3rem 0 .2rem 0;
}

Day/Night Toggle Button CSS Styles

Now, the actual part of the night mode toggle button started. Target the "toggle" class and define its absolute position, background color, and box-shadow as follows:

.toggle {
  position: absolute;
  width: 50%;
  background-color: #fff;
  box-shadow: 0 2px 15px rgba(0,0,0,.15);
  transition: transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

Similarly, target the label tag and toggle class and define its height and border-radius. Define 100% width for label and keep its relative position. You can define margin values according to your needs.

label, .toggle {
  height: 2.8rem;
  border-radius: 100px;
}
label {
  width: 100%;
  background-color: rgba(0,0,0,.1);
  border-radius: 100px;
  position: relative;
  margin: 1.8rem 0 4rem 0; 
  cursor: pointer;
}

Define the following CSS styles for the “Day” and “Night” text. You can set custom font size and color according to your existing template.

.names {
  font-size: 90%;
  font-weight: bolder;
  width: 65%;
  margin-left: 17.5%;
  margin-top: .5%;
  position: absolute;
  display: flex;
  justify-content: space-between;
  user-select: none;
}
.dark {
  opacity: .5;
}
.mark {
  border-radius: 100px;
  background-color: black;
}
.mark {
  width: 7%;
  margin: auto;
  position: relative;
  height: .25rem;
}
.mark::before {
  content: '';
  position: absolute;
  width: .25rem;
  height: 100%;
  left: -70%;
  opacity: .15;
  background-color: inherit;
}
.mark::after {
  content: '';
  position: absolute;
  width: .25rem;
  height: 100%;
  right: -70%;
  opacity: .15;
  background-color: inherit;
}

Finally, target each class of your template using a checked pseudo selector and + class to define the CSS style for the dark mode. You can set dark colors when the checkbox is checked and light colors when the checkbox is unchecked. Thus, it’ll produce a night mode toggle functionality.

/* -------- Switch Styles ------------*/
[type="checkbox"] {
  display: none;
}
/* Toggle */
[type="checkbox"]:checked + .app .toggle{
  transform: translateX(100%);
  background-color: #34323D;
}
[type="checkbox"]:checked + .app .dark{
  opacity: 1;
}
[type="checkbox"]:checked + .app .light{
  opacity: .5;
}
/* App */
[type="checkbox"]:checked + .app .body{
  background-color:  #26242E;
  color: white;
}
/* Circle */
[type="checkbox"]:checked + .app .crescent{
  transform: scale(1);
  background: #26242E;
}
[type="checkbox"]:checked + .app .circle{
  background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);
}
[type="checkbox"]:checked + .app .main-circle{
  background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);
}
/* Fab */
[type="checkbox"]:checked + .app .fab{
  background-color: #34323D;
}
[type="checkbox"]:checked + .app .arrow,
[type="checkbox"]:checked + .app .mark,
[type="checkbox"]:checked + .app .battery{
  background-color: white;
}
[type="checkbox"]:checked + .app .network{
  border-color: transparent transparent white transparent;
}
[type="checkbox"]:checked + .app .swipe{
  background-color: #34323D;
  opacity: 1;
}

You have done! I hope you have successfully integrated this pure CSS day and night mode toggle button into your project. If you have any questions or suggestions, let me know by comment below.

Share it!

You May Also Like

Leave a Comment