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/

Related Bootstrap Puglins

---

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!

---

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.0

Yarn

yarn add bs-darkmode@2.0.0

Usage

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 ⭐ in GitHub.