https://github.com/han109k/light-switch-bootstrap
Dark mode toggle for Bootstrap 5
https://github.com/han109k/light-switch-bootstrap
bootstrap bootstrap5 dark-mode dark-theme
Last synced: about 1 year ago
JSON representation
Dark mode toggle for Bootstrap 5
- Host: GitHub
- URL: https://github.com/han109k/light-switch-bootstrap
- Owner: han109k
- License: mit
- Created: 2021-06-21T12:39:43.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2023-06-22T14:17:52.000Z (almost 3 years ago)
- Last Synced: 2025-04-09T11:51:42.610Z (about 1 year ago)
- Topics: bootstrap, bootstrap5, dark-mode, dark-theme
- Language: HTML
- Homepage:
- Size: 36.1 KB
- Stars: 52
- Watchers: 4
- Forks: 14
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 💡 Light Switch for Bootstrap 5
Basic Bootstrap 5 custom checkbox to use night mode in your web site.
## Under the hood
Switching to dark mode is done by toggling HTML tags that includes `-dark` or `-light` as a class. Performed by DOM manipulation using JavaScript based on the default system theme. **Local storage** is used to save the choice under the name: _lightSwitch_
## Installing
- Download the latest release [v0.1.5](https://github.com/han109k/light-switch-bootstrap/archive/refs/tags/v0.1.5.zip)
- Clone via `git clone https://github.com/han109k/light-switch-bootstrap.git`
- Install with [npm](https://www.npmjs.com/package/light-switch-bootstrap) `npm i light-switch-bootstrap`
## Usage
Add custom checkbox to your html file then reference the `switch.js` script:
```html
Dark Mode
```
### About Usage
Designed for the plain Bootstrap 5 theme. If you're using custom themes then, you will probably have to customize it for better results.
## Example Implementation
[Bootstrap 5 Demo](https://han109k.github.io/light-switch-bootstrap/)