https://github.com/palcarazm/bs-darkmode-toggle
Bootstrap Darkmode Toggle is a plugin for bootstrap to add a ligthmode/darkmode switch in to your app.
https://github.com/palcarazm/bs-darkmode-toggle
bootstrap bootstrap-darkmode bootstrap-plugin darkmode darkmode-switch darkmode-toggle
Last synced: 2 months ago
JSON representation
Bootstrap Darkmode Toggle is a plugin for bootstrap to add a ligthmode/darkmode switch in to your app.
- Host: GitHub
- URL: https://github.com/palcarazm/bs-darkmode-toggle
- Owner: palcarazm
- License: mit
- Created: 2023-01-02T08:03:42.000Z (over 2 years ago)
- Default Branch: v1
- Last Pushed: 2023-08-21T02:06:55.000Z (almost 2 years ago)
- Last Synced: 2025-02-27T16:56:06.014Z (3 months ago)
- Topics: bootstrap, bootstrap-darkmode, bootstrap-plugin, darkmode, darkmode-switch, darkmode-toggle
- Language: JavaScript
- Homepage: https://palcarazm.github.io/bs-darkmode-toggle/
- Size: 566 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
[](https://github.com/palcarazm/bs-darkmode-toggle/blob/master/LICENSE)
[](https://github.com/palcarazm/bs-darkmode-toggle/releases)
[](https://getbootstrap.com/docs/5.0)
[](https://palcarazm.github.io/bootstrap5-toggle/)
[](https://www.jsdelivr.com/package/npm/bs-darkmode-toggle)
[](https://www.npmjs.com/package/bs-darkmode-toggle)
[](https://github.com/palcarazm/bs-darkmode-toggle/actions?query=workflow%3A%22Build+Check%22)
[](https://github.com/palcarazm/bs-darkmode-toggle/actions?query=workflow%3A%22Cypress+Tests%22)
[](https://snyk.io/advisor/npm-package/bs-darkmode-toggle)
[](https://github.com/palcarazm/bs-darkmode-toggle/security/policy)
[](https://github.com/sponsors/palcarazm)
# Bootstrap Darkmode Toggle
**Bootstrap Darkmode Toggle** is a plugin for bootstrap to add a ligthmode/darkmode switch in to your app.
---
#### Library Distributions
| Branch | Bootstrap Support | Last Release |
| :----: | :---------------: | :----------: |
| [bootstrap5-toggle v1](https://github.com/palcarazm/bs-darkmode-toggle/tree/v1) | [](https://getbootstrap.com/docs/5.0) | [](https://github.com/palcarazm/bs-darkmode-toggle/releases) |
See EOL for each version in [Security Policy Page](https://github.com/palcarazm/bs-darkmode-toggle/security/policy).
# Demos
**Demos and API Docs:** https://palcarazm.github.io/bs-darkmode-toggle/
# Related Bootstrap Plugins
---
- [Installation](#installation)
- [CDN](#cdn)
- [ECMAS Interface](#ecmas-interface)
- [jQuery Interface](#jquery-interface)
- [Download](#download)
- [NPM](#npm)
- [Yarn](#yarn)
- [Usage](#usage)
- [Initialize with HTML](#initialize-with-html)
- [Initialize with JS](#initialize-with-js)
- [API](#api)
- [Options](#options)
- [Methods](#methods)
- [Events](#events)
- [Event Propagation](#event-propagation)
- [Stopping Event Propagation](#stopping-event-propagation)
- [Collaborators welcom!](#collaborators-welcom)
---
# Installation
## CDN
[](https://www.jsdelivr.com/package/npm/bs-darkmode-toggle)
### ECMAS Interface
```html
```
### jQuery Interface
```html
```
## Download
[](https://github.com/palcarazm/bs-darkmode-toggle/releases)
## NPM
[](https://www.npmjs.com/package/bs-darkmode-toggle)
```ksh
npm install [email protected]
```
## Yarn
```ksh
yarn add [email protected]
```
# Usage
## Initialize with HTML
Simply create a `div` with the data attribute `data-plugin="bs-darkmode-toggle"`.
```html
```
## Initialize with JS
Simply select the element and invoke the Boostrap Darkmode Toggle API.
```html
document.getElementById('bs-darkmode-toggle').bsDarkmodeToggle();
```
# API
## Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`. Options and data attributes can be use together.
Find in the example the same toggle can be personalize vía API options and data attributes.
```html
document.getElementById('bs-darkmode-toggle').bsDarkmodeToggle({
state: false,
allowCookie: true,
lightColorMode: "blue"
});
```
| Name | Type | Default | Description |
| :--------------- | :---------: | :-------------------: | :---------- |
| `state` | Boolean | "true" | Default light (true) or dark (false) color scheme. For data attributes use light/dark instead. |
| `root` | String | ":root" | CSS selector for root element to apply color scheme. |
| `allowCookie` | Boolean | "false" | Set if the user has allowed to use cookies. For data attribute the presence means true and the absence false. |
| `lightLabel` | string/html |  | Set the light toggle label. |
| `darkLabel` | string/html |  | Set the dark toggle label. |
| `lightColorMode` | string | "light" | Set the light color scheme. |
| `darkColorMode` | string | "dark" | Set the dark color scheme. |
## Methods
Methods can be used to control the darkmode toggle directly.
```html
let demoElement = document.getElementById('bs-darkmode-toggle');
demoElement.bsDarkmodeToggle({
state: false,
allowCookie: true,
lightColorMode: "blue"
});
```
| Method | Example | Description |
| :------------ | :-------------------------------------------- | :---------------------------------------------- |
| `light` | `demoElement.bsDarkmodeToggle("light")` | Enable light color scheme. |
| `dark` | `demoElement.bsDarkmodeToggle("dark")` | Enable dark color scheme. |
| `toggle` | `demoElement.bsDarkmodeToggle("toggle")` | Switch the enable color scheme. |
| `allowCookie` | `demoElement.bsDarkmodeToggle("allowCookie")` | Set the Cookie Authorization status to allowed. |
| `denyCookie` | `demoElement.bsDarkmodeToggle("denyCookie")` | Set the Cookie Authorization status to denied. |
# Events
## Event Propagation
When the color scheme changes a `change` event is fired from bootstrap darkmode toggle element. so you can listner for this event.
```html
let demoElement = document.getElementById('bs-darkmode-toggle');
demoElement.addEventListener('Change',(_e)=>{
//Do something
});
```
## Stopping Event Propagation
Passing `true` to the `light`, `dark` and `toggle` methods will enable the silent option to prevent firing the `change` event in cases where you want to update the color scheme but do not want to fire the `change` event.
# Collaborators welcom!
- :sos: ¿Do you need some help? Open a question in [GitHub Discussion](https://github.com/palcarazm/bs-darkmode-toggle/discussions/categories/q-a)
- :bug: ¿Do you find a bug? Open a issue in [GitHub bug report](https://github.com/palcarazm/bs-darkmode-toggle/issues/new?assignees=-&labels=bug&template=bug_report.yml&title=Provide+a+general+summary+of+the+issue)
- :bulb: ¿Do you have a great idea? Open a issue in [GitHub feature request](https://github.com/palcarazm/bs-darkmode-toggle/issues/new?assignees=&labels=feature&template=feature_request.yml&title=Provide+a+general+summary+of+the+feature)
- :computer: ¿Do you know how to fix a bug? Open a pull request in [GitHub pull repuest](https://github.com/palcarazm/bs-darkmode-toggle/compare).
[](https://github.com/palcarazm/bs-darkmode-toggle/graphs/contributors)
¿Do you like the project? Give us a :star: in [GitHub](https://github.com/palcarazm/bs-darkmode-toggle).