Dark Mode Switch

Overview

The Light Switch for Bootstrap 5 is a tool that allows users to easily switch between light and dark modes on websites built using Bootstrap 5. It achieves this by manipulating the HTML tags and applying appropriate classes based on the default system theme. The user’s choice is saved in local storage, ensuring that the selected mode persists across page reloads.

Features

• Dark mode toggle: Allows users to switch between light and dark modes.
• DOM manipulation: HTML tags are dynamically modified by adding or removing classes to switch between modes.
• Local storage: The user’s choice is saved in local storage under the name “lightSwitch”.
• Easy installation and setup: Users can download the latest release or clone the repository via git. It can also be installed using npm.

Installation

To install the Light Switch for Bootstrap 5:

1. Download the latest release version v0.1.4.
2. Alternatively, clone the repository using the command: git clone https://github.com/lucthienphong1120/dark-mode-switch.git
3. If using npm, install the package by running the command: npm i light-switch-bootstrap
4. Add a custom checkbox to your HTML file.
5. Reference the switch.js script in your HTML file.
6. Customize the switch if using a custom Bootstrap 5 theme.

Summary

The Light Switch for Bootstrap 5 is a simple and effective tool for implementing dark mode functionality in websites built using Bootstrap 5. It provides easy toggling between light and dark modes by manipulating HTML tags and utilizing local storage to save user preferences. The installation process is straightforward, making it accessible for developers to quickly add dark mode functionality to their Bootstrap 5 projects.