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
  • 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/[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>

ECMAS Interface

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

Download

NPM

npm install [email protected]

Yarn

yarn add [email protected]

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!

• :sos: ¿Do you need some help? Open a issue in GitHub help wanted
• :bug: ¿Do you find a bug? Open a issue in GitHub bug report
• :bulb: ¿Do you have a great idea? Open a issue in GitHub feature request
• :computer: ¿Do you know how to fix a bug? Open a pull request in GitHub pull repuest.

¿Do you like the project? Give us a :star: in GitHub.