Skip to content

Latest commit

 

History

History
245 lines (205 loc) · 14.8 KB

README.md

File metadata and controls

245 lines (205 loc) · 14.8 KB
Raw

GitHub license Latest release JSDelivr Badge NPM Badge Maintenance Funding Rate this package

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 Bootstrap 5 Latest release
bs-darkmode v1.X.X Bootstrap 4 Latest release

Demos

Demos and API Docs: https://palcarazm.github.io/bs-darkmode/

Related Bootstrap Puglins

Table of Contents generated with DocToc

Installation

CDN

JSDelivr Badge

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

Latest release

NPM

NPM Badge

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!

GitHub Contributors

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