JSFiddle - React, Tailwind, and code Playground

by reporter

HTML

<html lang="en">

<body>
  <nav id="nav-bar">
    <label class="switch">
          <input type="checkbox" class='dark-cb'>
          <span class="slider round" title="light/dark mode"></span>
        </label>
  </nav>
</body>

</html>

CSS

html {
  min-height: 100%;
}

.switch {
  position: absolute;
  top: 10px;
  left: 20px;
  width: 60px;
  height: 34px;
}


/* Hide default HTML checkbox */

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}


/* The slider */

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: skyblue;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider::before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #FFFF66;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: darkblue;
}

input:focus+.slider {
  box-shadow: 0 0 1000px darkblue;
}

input:checked+.slider::before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round::before {
  border-radius: 50%;
}

.dark {
  filter: invert(1);
}

JavaScript

let htmlTag = null;
let switchBtn = null;
let darkCheckbox = null;
function init()
{
 htmlTag = document.querySelector('html');
 switchBtn = document.querySelector('.slider');
 darkCheckbox = document.querySelector('.dark-cb');
 
 switchBtn.addEventListener('click', function() {
  darkMode();
});

}


function darkMode()
{
 if (localStorage.getItem('dark') == 'true')
 {
    darkCheckbox.setAttribute('checked','');
    htmlTag.classList.add('dark');
    switchBtn.classList.add('dark');
    
  } else {
    darkCheckbox.removeAttribute('checked');
    htmlTag.classList.remove('dark');
    switchBtn.classList.remove('dark');
  }
}

window.onload = init();