Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/palcarazm/bs-darkmode
Bootstrap Darkmode is a bootstrap plugin/widget that supports toggling between light and dark theme
https://github.com/palcarazm/bs-darkmode
bootstrap bootstrap-dark-mode dark-mode dark-mode-toggle dark-theme darkmode
Last synced: 23 days ago
JSON representation
Bootstrap Darkmode is a bootstrap plugin/widget that supports toggling between light and dark theme
- Host: GitHub
- URL: https://github.com/palcarazm/bs-darkmode
- Owner: palcarazm
- License: mit
- Created: 2022-08-10T05:53:37.000Z (over 2 years ago)
- Default Branch: v2.X.X
- Last Pushed: 2024-04-22T06:36:39.000Z (7 months ago)
- Last Synced: 2024-09-24T01:59:55.740Z (about 2 months ago)
- Topics: bootstrap, bootstrap-dark-mode, dark-mode, dark-mode-toggle, dark-theme, darkmode
- Language: HTML
- Homepage: https://palcarazm.github.io/bs-darkmode/
- Size: 816 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.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/blob/master/LICENSE)
[](https://github.com/palcarazm/bs-darkmode/releases)
[](https://www.jsdelivr.com/package/npm/bs-darkmode)
[](https://www.npmjs.com/package/bs-darkmode)
[](https://github.com/palcarazm/bs-darkmode/graphs/contributors)
[](https://github.com/sponsors/palcarazm)
[](https://openbase.com/js/bs-darkmode?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge)
# Bootstrap Darkmode
**Bootstrap Darkmode** is a bootstrap plugin/widget that supports toggling between light and dark theme.
***
#### Library Distributions
Branch | Bootstrap Support | Last Release
---|---|---
[bs-darkmode v2.X.X](https://github.com/palcarazm/bs-darkmode/tree/v2.X.X) | [](https://getbootstrap.com/docs/5.0) | [](https://github.com/palcarazm/bs-darkmode/releases)
[bs-darkmode v1.X.X](https://github.com/palcarazm/bs-darkmode/tree/v1.X.X) | [](https://getbootstrap.com/docs/4.0) | [](https://github.com/palcarazm/bs-darkmode/releases)
# Demos
**Demos and API Docs:** https://palcarazm.github.io/bs-darkmode/
# Related Bootstrap Puglins
***
**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)*
- [Bootstrap Darkmode](#bootstrap-darkmode)
- [Library Distributions](#library-distributions)
- [Demos](#demos)
- [Installation](#installation)
- [CDN](#cdn)
- [jQuery Interface](#jquery-interface)
- [ECMAS Interface](#ecmas-interface)
- [Download](#download)
- [NPM](#npm)
- [Yarn](#yarn)
- [Usage](#usage)
- [Initialize With HTML](#initialize-with-html)
- [Initialize With Code](#initialize-with-code)
- [API](#api)
- [Options](#options)
- [CSS Vars to change](#css-vars-to-change)
- [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)
### jQuery Interface
```html
```
### ECMAS Interface
```html
```
## Download
[](https://github.com/palcarazm/bs-darkmode/releases)
## NPM
[](https://www.npmjs.com/package/bs-darkmode)
```ksh
npm install [email protected]
```
## Yarn
```ksh
yarn add [email protected]
```
# Usage
## Initialize With HTML
Simply add `data-plugin="bsdarkmode"` to automatically convert an element to a Bootstrap.
```html
```
## Initialize With Code
Toggles can also be initialized via JavaScript code.
EX: Initialize id `darkmodeToggle` with a single line of JavaScript.
```html
$(function(){
$('#darkmodeToggle').bsDarkmode();
});
```
# API
## Options
* Options can be passed via data attributes or JavaScript
* For data attributes, append the option name to `data-` (ex: `data-state="light"`)
```html
$(function () {
$('#darkmodeToggle').bsDarkmode({
state: false,
root:'#api-example',
lightvars: '{"primary":"#FF0000","secondary":"#00FF00"}',
darkvars: '{"primary":"#0000FF","secondary":"#FFFF00"}'
});
})
```
Name |Type |Default |Description
--------------|-------|--------|------------
`state` |boolean|true |Initial state (For data-state use `light` or `dark`). The user preferred color scheme dark is prioritary.
`root` |string |":root" |Root element to apply CSS vars
`allowsCookie`|boolean|false |Cookie authorization status
`lightlabel` |html |sun svg |Element inner HTML for light mode
`darklabel` |html |moon svg|Element inner HTML for dark mode
`lightvars` |string |"{}" |JSON object with CSS vars for light mode
`darkvars` |string |"{}" |JSON object with CSS vars for dark mode
## CSS Vars to change
The following CSS Vars that can be changed form `lightvars` and `darkvars` attributes.
Var |Type |Default Ligth|Default Dark|Description
----------------|---------|-------------|------------|-----------
`blue` |HEX color|#0d6efd |#3f6791 |Standard Bootstrap [color](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors)
`indigo` |HEX color|#6610f2 |#6610f2 |Standard Bootstrap [color](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors)
`purple` |HEX color|#6f42c1 |#6f42c1 |Standard Bootstrap [color](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors)
`pink` |HEX color|#d63384 |#e83e8c |Standard Bootstrap [color](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors)
`red` |HEX color|#dc3545 |#e74c3c |Standard Bootstrap [color](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors)
`orange` |HEX color|#fd7e14 |#fd7e14 |Standard Bootstrap [color](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors)
`yellow` |HEX color|#ffc107 |#f39c12 |Standard Bootstrap [color](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors)
`green` |HEX color|#198754 |#00bc8c |Standard Bootstrap [color](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors)
`teal` |HEX color|#20c997 |#20c997 |Standard Bootstrap [color](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors)
`cyan` |HEX color|#0dcaf0 |#3498db |Standard Bootstrap [color](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors)
`gray` |HEX color|#6c757d |#ced4da |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays)
`gray-dark` |HEX color|#343a40 |#e9ecef |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays)
`gray-100` |HEX color|#f8f9fa |#212529 |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays)
`gray-200` |HEX color|#e9ecef |#343a40 |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays)
`gray-300` |HEX color|#dee2e6 |#495057 |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays)
`gray-400` |HEX color|#ced4da |#6c757d |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays)
`gray-500` |HEX color|#adb5bd |#adb5bd |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays)
`gray-600` |HEX color|#6c757d |#ced4da |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays)
`gray-700` |HEX color|#495057 |#dee2e6 |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays)
`gray-800` |HEX color|#343a40 |#e9ecef |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays)
`gray-900` |HEX color|#212529 |#f8f9fa |Standard Bootstrap [gray color](https://getbootstrap.com/docs/4.0/getting-started/theming/#grays)
`primary` |HEX color|#0d6efd |#3f6791 |Standard Bootstrap [theme color](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors)
`secondary` |HEX color|#6c757d |#ced4da |Standard Bootstrap [theme color](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors)
`success` |HEX color|#198754 |#00bc8c |Standard Bootstrap [theme color](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors)
`info` |HEX color|#0dcaf0 |#3498db |Standard Bootstrap [theme color](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors)
`warning` |HEX color|#ffc107 |#f39c12 |Standard Bootstrap [theme color](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors)
`danger` |HEX color|#dc3545 |#e74c3c |Standard Bootstrap [theme color](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors)
`light` |HEX color|#f8f9fa |#212529 |Standard Bootstrap [theme color](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors)
`dark` |HEX color|#212529 |#f8f9fa |Standard Bootstrap [theme color](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors)
`body-color` |HEX color|#212529 |#f8f9fa |Body color
`body-bg` |HEX color|#fff |#495057 |Body background color
`white` |HEX color|#fff |#000 |White color
`black` |HEX color|#000 |#fff |Black color
Theme colors, black and white are also exposed in HSL with `{color}-h`, `{color}-s` and `{color}-l`and in RGB with `{color}-rgb`.
## Methods
Methods can be used to control toggles directly.
```html
```
Method |Example |Description
---------------------|-------------------------------------------------------------------|------------
initialize | `$('#darkmodeToggle').bsDarkmode()` |Initializes the darkmode plugin with options
light | `$('#darkmodeToggle').bsDarkmode('light')` |Sets the darkmode toggle to 'light' state
dark | `$('#darkmodeToggle').bsDarkmode('dark')` |Sets the darkmode toggle to 'dark' state
toggle | `$('#darkmodeToggle').bsDarkmode('toggle')` |Toggles the state of the darkmode toggle light/dark
setCookieAutorization| `$('#darkmodeToggle').bsDarkmode('setCookieAutorization', status)`|Sets the Cookie authorization status. Status can be `true` or `false`
# Events
## Event Propagation
Note All events are propagated to and from the element to the darkmode toggle.
You should listen to events from the HTML element directly rather than look for custom events.
```html
$(function() {
$('#darkmodeToggle').change(function() {
$('#console-event').html('Mode changed')
})
})
```
## Stopping Event Propagation
Passing `true` to the light, dark and toggle methods will enable the silent option to prevent the control from propagating the change event in cases where you want to update the controls light/dark state, but do not want to fire the onChange event.
```html
Light by API (silent)
Dark by API (silent)
Light by API (not silent)
Dark by API (not silent)
```
# Collaborators welcom!
- :sos: ¿Do you need some help? Open a issue in [GitHub help wanted](https://github.com/palcarazm/bs-darkmode/issues/new?assignees=&labels=help+wanted&template=help-wanted.md&title=%5BHELP%5D)
- :bug: ¿Do you find a bug? Open a issue in [GitHub bug report](https://github.com/palcarazm/bs-darkmode/issues/new?assignees=&labels=bug&template=bug_report.md&title=%5BBUG%5D)
- :bulb: ¿Do you have a great idea? Open a issue in [GitHub feature request](https://github.com/palcarazm/bs-darkmode/issues/new?assignees=&labels=enhancement&template=feature_request.md&title=%5BFEATURE%5D)
- :computer: ¿Do you know how to fix a bug? Open a pull request in [GitHub pull repuest](https://github.com/palcarazm/bs-darkmode/compare).
[](https://github.com/palcarazm/bs-darkmode/graphs/contributors)
¿Do you like the project? Give us a :star: in [GitHub](https://github.com/palcarazm/bs-darkmode).