Bootstrap Darkmode is a bootstrap plugin/widget that supports toggling between light and dark theme
npm install bs-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 |  | 
bs-darkmode v1.X.X |  | 
Table of Contents generated with DocToc
- Bootstrap Darkmode
- Library Distributions
- Demos
- Installation
- CDN
- jQuery Interface
- ECMAS Interface
- Download
- NPM
- Yarn
- Usage
- Initialize With HTML
- Initialize With Code
- API
- Options
- CSS Vars to change
- Methods
- Events
- Event Propagation
- Stopping Event Propagation
- Collaborators welcom!
**
html
`$3
html
`Download
NPM
ksh
npm install bs-darkmode@2.0.0
`Yarn
ksh
yarn add bs-darkmode@2.0.0
`Usage
Initialize With HTML
Simply add to automatically convert an element to a Bootstrap.`html
`Initialize With Code
Toggles can also be initialized via JavaScript code. EX: Initialize id
with a single line of JavaScript.
`html
`API
Options
* Options can be passed via data attributes or JavaScript
* For data attributes, append the option name to (ex: data-state="light")`html
data-lightvars='{"primary":"#FF0000","secondary":"#00FF00"}'
data-darkvars='{"primary":"#0000FF","secondary":"#FFFF00"}'>
`Name |Type |Default |Description
--------------|-------|--------|------------
|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 modeCSS 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
indigo |HEX color|#6610f2 |#6610f2 |Standard Bootstrap color
purple |HEX color|#6f42c1 |#6f42c1 |Standard Bootstrap color
pink |HEX color|#d63384 |#e83e8c |Standard Bootstrap color
red |HEX color|#dc3545 |#e74c3c |Standard Bootstrap color
orange |HEX color|#fd7e14 |#fd7e14 |Standard Bootstrap color
yellow |HEX color|#ffc107 |#f39c12 |Standard Bootstrap color
green |HEX color|#198754 |#00bc8c |Standard Bootstrap color
teal |HEX color|#20c997 |#20c997 |Standard Bootstrap color
cyan |HEX color|#0dcaf0 |#3498db |Standard Bootstrap color
gray |HEX color|#6c757d |#ced4da |Standard Bootstrap gray color
gray-dark |HEX color|#343a40 |#e9ecef |Standard Bootstrap gray color
gray-100 |HEX color|#f8f9fa |#212529 |Standard Bootstrap gray color
gray-200 |HEX color|#e9ecef |#343a40 |Standard Bootstrap gray color
gray-300 |HEX color|#dee2e6 |#495057 |Standard Bootstrap gray color
gray-400 |HEX color|#ced4da |#6c757d |Standard Bootstrap gray color
gray-500 |HEX color|#adb5bd |#adb5bd |Standard Bootstrap gray color
gray-600 |HEX color|#6c757d |#ced4da |Standard Bootstrap gray color
gray-700 |HEX color|#495057 |#dee2e6 |Standard Bootstrap gray color
gray-800 |HEX color|#343a40 |#e9ecef |Standard Bootstrap gray color
gray-900 |HEX color|#212529 |#f8f9fa |Standard Bootstrap gray color
primary |HEX color|#0d6efd |#3f6791 |Standard Bootstrap theme color
secondary |HEX color|#6c757d |#ced4da |Standard Bootstrap theme color
success |HEX color|#198754 |#00bc8c |Standard Bootstrap theme color
info |HEX color|#0dcaf0 |#3498db |Standard Bootstrap theme color
warning |HEX color|#ffc107 |#f39c12 |Standard Bootstrap theme color
danger |HEX color|#dc3545 |#e74c3c |Standard Bootstrap theme color
light |HEX color|#f8f9fa |#212529 |Standard Bootstrap theme color
dark |HEX color|#212529 |#f8f9fa |Standard Bootstrap theme color
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 colorTheme colors, black and white are also exposed in HSL with
{color}-h, {color}-s and {color}-land in RGB with {color}-rgb.Methods
Methods can be used to control toggles directly.`html
`Method |Example |Description
---------------------|-------------------------------------------------------------------|------------
initialize |
|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 falseEvents
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
`Stopping Event Propagation
Passing 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
``
¿Do you like the project? Give us a :star: in GitHub.