bs-darkmode v2.0.0

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

CSS Vars to change

The following CSS Vars that can be changed form lightvars and darkvars attributes.

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>

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.