Dark/Light Mode - jQuery Plugin

Is a simple and customizable jQuery plugin that allows users to switch between light and dark modes on your website with ease. It's perfect for enhancing the user experience and accessibility by providing an option to change the display mode according to their preferences.

For a live demo and examples of customization, please visit the (https://jquery-toggle-switch-plugin.vercel.app/).

Installation

You can install the Toggle Mode jQuery plugin in three simple steps:

1. Include jQuery: Make sure you have jQuery included in your project. If not, you can add it by including the following script tag in your HTML file:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

Download the Plugin: Download the toggle-mode.js file from this repository or link it from a Content Delivery Network (CDN) in your HTML file.

<script src="toggle-mode.js"></script>

HTML Structure: Create the HTML structure for the toggle switch by adding the following code to your HTML file.

Usage

To use the Toggle Mode plugin, follow these steps: Initialize the Plugin: In your JavaScript file, initialize the plugin as follows:

"$(document).ready(function() { $('.toggle-switch').toggleMode(); });"

Customize Styles: You can customize the styles of the toggle switch and icons by modifying the CSS provided in the toggle-mode.css file or by adding your own custom styles.

Enjoy Light and Dark Modes: Your website now allows users to switch between light and dark modes with a single click!

Customization

The Toggle Mode plugin is highly customizable. You can adjust the colors, icons, and styles to match your website's design. Feel free to modify the provided CSS or add your own CSS rules to create the perfect look for your light and dark modes.

License

This jQuery plugin is open-source and available under the MIT License.

Keywords jQuery Plugin Toggle Switch Dark Mode Light Mode User Preferences User Experience Accessibility

Author

Biasiolo