Bootstrap Darkmode is a bootstrap plugin/widget that supports toggling between light and dark theme.
| Branch | Bootstrap Support | Last Release |
|---|---|---|
| bs-darkmode v2.X.X |  |
|
| bs-darkmode v1.X.X |  |
 |
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!
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/bs-darkmode.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/bs-darkmode.jquery.min.js"></script><link href="https://cdn.jsdelivr.net/npm/[email protected]/css/bs-darkmode.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/bs-darkmode.ecmas.min.js"></script>npm install [email protected]yarn add [email protected]Simply add data-plugin="bsdarkmode" to automatically convert an element to a Bootstrap.
<button class="btn btn-primary" data-plugin="bsdarkmode"></button>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>- 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 |
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 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 |
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>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>- 🆘 ¿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 ⭐ in GitHub.