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

palcarazm / bs-darkmode