Minimal Dark Mode Switch In jQuery - Toggle-View
File Size: | 3.18 KB |
---|---|
Views Total: | 1311 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.