Creative Dark Mode Switch Built With HTML/CSS/jQuery

This is a minimal, creative, animated dark mode toggle switch achieved by basic HTML, CSS/CSS3, and JavaScript (jQuery).

When toggled, the switch handle transforms into a charming moon shape, mirroring the onset of 'night (dark) mode'. 

How to use it:

1. Code the HTML for the dark mode switch.

<div class="radio-btn">
  <div class="radio-inner"></div>
</div>

2. Apply CSS styles to the switch.

.radio-btn {
  width: 150px;
  height: 80px;
  padding: 10px;
  background-color: #27173a;
  border-radius: 50px;
  cursor: pointer;
  overflow: hidden;
}

.radio-btn .radio-inner {
  position: relative;
  width: 60px;
  height: 60px;
  background-color: #ffc207;
  border-radius: 50%;
  transition: all 0.6s;
}

.radio-btn .radio-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: -25px;
  width: 100%;
  height: 100%;
  background-color: #27173a;
  border-radius: 50%;
  transform: scale(0);
  transition: all 0.6s;
}

.radio-btn .radio-inner.active {
  transform: translate(calc(150px - 80px));
}

.radio-btn .radio-inner.active::before {
  left: -25px;
  transform: scale(1);
}

3. Load the necessary jQuery library in the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

4. Use jQuery to toggle between the CSS styles of the switch and your page's theme.

$(document).ready(function() {
  $(".radio-btn").on("click", function() {
    $(".radio-inner").toggleClass("active");
    $("body").toggleClass("dark");
  })
})

---

This awesome jQuery plugin is developed by Valentina-Assef. For more Advanced Usages, please check the demo page or visit the official website.