JSFiddle - React, Tailwind, and code Playground

by Sarfaraz Hussain

HTML

<link rel='stylesheet' id='3432-css' href='//al-islam.org.in/wp-content/uploads/custom-css-js/3432.css?v=3920' type="text/css" media='all' />

<link rel='stylesheet' id='3428-css' href='//al-islam.org.in/wp-content/uploads/custom-css-js/3428.css?v=2941' type="text/css" media='all' />

<div id="switch" class="toggle">
      
       <div class="in-toggle tg-left">
         <input type="checkbox"> 
      </div>
    </div>

CSS

.toggle {
   width: 60px;
    height: 30px;
    background: #ddd;
    position: sticky;
    top: 20%;
    left: 50%;
    transform: translate(-50%,250%);
    transition: 1s ease;
    z-index: 999;
    pointer-events: none;
    border-radius: 30px;
    top: 0%;
    box-shadow: 5px 10px 8px #000000;
    bottom: -50% !important;
}
.toggle .in-toggle input{
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  z-index: 1;
}
.clicked{
  background: #346ced;
}
.in-toggle{
  width: 46%;
  height: 88%;
  background: #fff;
  position: relative;
  top: 4%;
  transition: 1s ease;
      border-radius: 50%;
}
.tg-left{
  left: 6%;
}
.tg-right{
  left: 48%;
}

input[type="checkbox"], input[type="radio"] {
    padding: 0;
    pointer-events: all;
}

div#switch:before {
    content: 'Switch Theme';
    position: absolute;
    top: -30px;
    width: 110px;
    text-align: center;
    left: -30px;
    font-weight: bold;
    /* box-shadow: 5px 10px 8px #ffd6d6; */
    background: #fff;
    color: #000;
    border-radius: 50px;
    font-size: 13px;
}

JavaScript

var toggle_btn = $(".toggle .in-toggle input");
    var i_tg = $(".in-toggle");
    var toggle = $(".toggle");
    
    toggle_btn.on("click", clicked);
    
    function clicked() {
      if (toggle_btn.is(":checked")) {
        i_tg.addClass("tg-right");
    
        toggle.addClass("clicked");

      } else {
        i_tg.removeClass("tg-right");
        toggle.removeClass('clicked');

      }
    }
  
  
  var  switch_mode = 'dark';

document.getElementById('switch').onclick = function(){
  if(switch_mode == 'dark'){
      document.getElementById('3428-css').setAttribute('href','');
     document.getElementById('3432-css').setAttribute('href','//al-islam.org.in/wp-content/uploads/custom-css-js/3432.css');
     switch_mode = 'light';
     
       
  } else {
    
 document.getElementById('3428-css').setAttribute('href','//al-islam.org.in/wp-content/uploads/custom-css-js/3428.css');
 document.getElementById('3432-css').setAttribute('href','');
     switch_mode = 'dark';

  }
}