dark toggle

by neonDog

HTML

<link rel="stylesheet" href="https://howdoweb.com/themes/app/css/style.css">
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/font-awesome-line-awesome/css/all.min.css">

<div class="background-cover w-100 h-100 position-absolute section section-light section-darkmode-invert-components" style="background: var(--bs-body-bg)">
  <div id="darkSwitch" class="btn color-ligt dark-switch fa-2x">
    <i class="fa fa-moon moon"></i>
    <i class="fa fa-sun light"></i>
  </div>
</div>

SCSS

.dark-switch {
  overflow: hidden;
  position: relative;
  .fa {
    transition: transform 500ms ease, opacity 300ms ease;
  }
  
  .moon {
    color: #444;
    position: absolute;
  }
  .light {
    color: #ffc62b;
    transform: translate3d(40px,120%,0) rotateZ(60deg);
    opacity:0;
  }
  
}

.darkmode {
  .moon {
    transform: translate3d(0px,120%,0) rotateZ(60deg);
    opacity:0;
  }
  .light {
    transform: translate3d(0px,0,0);
    opacity: 1;
  }
}

JavaScript

darkSwitch.addEventListener('click', function() {
    document.body.classList.toggle('darkmode');
});