Code Playground

xxxxxxxxxx
 
<div class="flex justify-center items-center vh-100">
   <div class="element flex flex-wrap items-center">
      <div class="checkbox-wrap ">
         <input type="checkbox" class="toggle-switch">
      </div>
      <div class="opts">
         <div class="opt-1"><p>light mode</p></div>
         <div class="opt-2"><p>dark mode</p></div>
      </div>
   </div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

xxxxxxxxxx
 
@import url('https://cdnjs.cloudflare.com/ajax/libs/tachyons/7.0.1-1/tachyons.css');
body {
  font-family: "Poppins", sans-serif;
  background: #FAFAFC;
  color: #4a4a4e;
  transition: 0.2s all;
}
​
.dark {
  background: #181818;
}
​
.element {
  position: relative;
}
​
input[type=checkbox].toggle-switch {
  transform: rotate(90deg);
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  outline: 0;
  cursor: pointer;
  /* width of the track */
  width: 4em;
  /* height of the track */
  height: 1.5em;
  border-radius: 3em;
  background-color: #ebebeb;
  transition: background-color 0.09s ease-in-out;
  position: relative;
}
input[type=checkbox].toggle-switch:active::after {
  background-color: #f2f2f2;
  padding-right: 0.8em;
}
input[type=checkbox].toggle-switch::after {
  content: "";
  /* toggle shape -- 
  height should equal width 
  to maintain circle */
  width: 2em;
  height: 2em;
  background-color: white;
  border-radius: 3em;
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
  box-shadow: 2px 0px 5px 0 rgba(0, 0, 0, 0.15);
}
​
input[type=checkbox].toggle-switch:checked {
  background-color: #333;
}
input[type=checkbox].toggle-switch:checked:active::after {
  margin-left: -0.8em;
}
input[type=checkbox].toggle-switch:checked::after {
  left: 2em;
  background-color: #242424;
}
​
.opts {
  color: gray;
}
​
.opt-1 {
  color: black;
}
​
.opt-1,
.opt-2 {
  transition: 0.2s all;
}
​
.active .opt-1 {
  color: gray;
}
.active .opt-2 {
  color: white;
}

xxxxxxxxxx
 
$(document).ready(function() {
 
  $(".toggle-switch").on("click", function(event){
     $("body").toggleClass("dark");
     $("body").toggleClass("active");   
 });
});

Frontend Forever App