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 |  |
|
| bs-darkmode v1.X.X |  |
 |
Demos
Demos and API Docs: https://palcarazm.github.io/bs-darkmode/
Table of Contents generated with DocToc
- Bootstrap Darkmode - Library Distributions
- Demos
- Installation
- Usage
- API
- Events
- Collaborators welcom!
Installation
CDN
jQuery Interface
<link href="https://cdn.jsdelivr.net/npm/bs-darkmode@2.0.0/css/bs-darkmode.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bs-darkmode@2.0.0/js/bs-darkmode.jquery.min.js"></script>ECMAS Interface
<link href="https://cdn.jsdelivr.net/npm/bs-darkmode@2.0.0/css/bs-darkmode.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bs-darkmode@2.0.0/js/bs-darkmode.ecmas.min.js"></script>Download
NPM
npm install bs-darkmode@2.0.0Yarn
yarn add bs-darkmode@2.0.0Usage
Initialize With HTML
Simply add data-plugin="bsdarkmode" to automatically convert an element to a Bootstrap.
<button class="btn btn-primary" data-plugin="bsdarkmode"></button>Initialize With Code
Toggles can also be initialized via JavaScript code.
EX: Initialize id darkmodeToggle with a single line of JavaScript.
<button class="btn btn-primary" id="darkmodeToggle"></button>
<script>
$(function(){
$('#darkmodeToggle').bsDarkmode();
});
</script>API
Options
- Options can be passed via data attributes or JavaScript
- For data attributes, append the option name to
data-(ex:data-state="light")
<div id="api-example">
<button class="btn btn-primary" data-plugin="bsdarkmode" data-state="dark" data-root="#api-example"
data-lightvars='{"primary":"#FF0000","secondary":"#00FF00"}'
data-darkvars='{"primary":"#0000FF","secondary":"#FFFF00"}'></button>
<button class="btn btn-primary" id="darkmodeToggle"></button>
</div>
<script>
$(function () {
$('#darkmodeToggle').bsDarkmode({
state: false,
root:'#api-example',
lightvars: '{"primary":"#FF0000","secondary":"#00FF00"}',
darkvars: '{"primary":"#0000FF","secondary":"#FFFF00"}'
});
})
</script>| 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 |
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 color |
Theme 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.
<button class="btn btn-primary" id="darkmodeToggle"></button>| 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.
<button class="btn btn-primary" id="darkmodeToggle" data-plugin="bsdarkmode"></button>
<div id="console-event"></div>
<script>
$(function() {
$('#darkmodeToggle').change(function() {
$('#console-event').html('Mode changed')
})
})
</script>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.
<button class="btn btn-primary" data-plugin="bsdarkmode" id="darkmodeToggle"></button>
<button class="btn btn-success" onclick="$('#darkmodeToggle').bsDarkmode('light',true)" >Light by API (silent)</button>
<button class="btn btn-success" onclick="$('#darkmodeToggle').bsDarkmode('dark',true)">Dark by API (silent)</button>
<button class="btn btn-warning" onclick="$('#darkmodeToggle').bsDarkmode('light')">Light by API (not silent)</button>
<button class="btn btn-warning" onclick="$('#darkmodeToggle').bsDarkmode('dark')">Dark by API (not silent)</button>Collaborators welcom!
🆘 ¿Do you need some help? Open a issue in GitHub help wanted🐛 ¿Do you find a bug? Open a issue in GitHub bug report💡 ¿Do you have a great idea? Open a issue in GitHub feature request💻 ¿Do you know how to fix a bug? Open a pull request in GitHub pull repuest.
¿Do you like the project? Give us a