Minimal Dark Mode Switch In jQuery - Toggle-View

A minimal jQuery snippet that enables a switch control to switch between Dark Mode and Light Mode on your webpage.

How to use it:

1. Create the HTML for the toggle switch.

<div id="toggle">
  <div id="circle"></div>
</div>

2. The required CSS styles for the dark mode switch.

#toggle {
  background-color: white;
  width: 140px;
  height: 40px;
  border-radius: 20px;
  border: 2px solid black;
  margin: 50px auto;
  cursor: pointer;
}

#circle {
  width: 38px;
  height: 38px;
  background-color: black;
  border-radius: 50%;
  margin-top: 1px;
  margin-left: 1px;
}

3. Add a dark theme to your webpage.

.color-white {
  color: white;
}

.bck-color-black {
  background-color: black;
}

4. The dark mode script requires the jQuery library to work.

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

5. Set the initial toggle state to OFF.

var toggled = false;

6. Enable the switch to toggle the dark mode.

var circle = $("#circle");
$("#toggle").click(function () {
  $("h1, p, div").toggleClass("color-white");
  $("body").toggleClass("bck-color-black");
  if (!toggled) {
    circle.css("margin-left", "100px");
    toggled = true;
  } else {
     circle.css("margin-left", "1px");
    toggled = false;
  }
});

---

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