https://github.com/biasiolo/jquery-dark-mode-switch-plugin
Toggle Mode is a versatile jQuery plugin that empowers your website with easy-to-use light and dark mode switching. Enhance user experience and accessibility by letting visitors choose their preferred display mode effortlessly.
https://github.com/biasiolo/jquery-dark-mode-switch-plugin
accessibility dark-mode jquery light-mode plugin toggle-switch user-experience user-preferences
Last synced: 2 months ago
JSON representation
Toggle Mode is a versatile jQuery plugin that empowers your website with easy-to-use light and dark mode switching. Enhance user experience and accessibility by letting visitors choose their preferred display mode effortlessly.
- Host: GitHub
- URL: https://github.com/biasiolo/jquery-dark-mode-switch-plugin
- Owner: Biasiolo
- Created: 2023-11-07T15:09:08.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-22T02:53:00.000Z (about 1 year ago)
- Last Synced: 2025-03-04T03:19:55.507Z (3 months ago)
- Topics: accessibility, dark-mode, jquery, light-mode, plugin, toggle-switch, user-experience, user-preferences
- Language: JavaScript
- Homepage: https://jquery-toggle-switch-plugin.vercel.app
- Size: 14.6 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:
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.
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