Bootstrap Darkmode Toggle

Bootstrap Darkmode Toggle is a plugin for bootstrap to add a ligthmode/darkmode switch in to your app.

Library Distributions

| Branch | Bootstrap Support | Last Release | | :----: | :---------------: | :----------: | | bootstrap5-toggle v1 | | |

See EOL for each version in Security Policy Page.

Demos

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

Related Bootstrap Plugins

• Installation
  • CDN
    • ECMAS Interface
    • jQuery Interface
  • Download
  • NPM
  • Yarn
• Usage
  • Initialize with HTML
  • Initialize with JS
• API
  • Options
  • Methods
• Events
  • Event Propagation
  • Stopping Event Propagation
• Collaborators welcom!

Installation

CDN

ECMAS Interface

<!-- Consider loading Bootstrap and Bootstrap 5 toggle dependencies -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/bs-darkmode-toggle.ecmas.min.js"></script>

jQuery Interface

<!-- Consider loading Bootstrap, jQuery and Bootstrap 5 toggle dependencies -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/bs-darkmode-toggle.jquery.min.js"></script>

Download

NPM

npm install [email protected]

Yarn

yarn add [email protected]

Usage

Initialize with HTML

Simply create a div with the data attribute data-plugin="bs-darkmode-toggle".

<div data-plugin="bs-darkmode-toggle"></div>

Initialize with JS

Simply select the element and invoke the Boostrap Darkmode Toggle API.

<div id="bs-darkmode-toggle"></div>
<script>
  document.getElementById('bs-darkmode-toggle').bsDarkmodeToggle();
</script>

API

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-. Options and data attributes can be use together.

Find in the example the same toggle can be personalize vía API options and data attributes.

<div data-plugin="bs-darkmode-toggle" data-state="dark" data-allowCookie data-lightColorMode="blue"></div>

<div id="bs-darkmode-toggle"></div>
<script>
  document.getElementById('bs-darkmode-toggle').bsDarkmodeToggle({
    state: false,
    allowCookie: true,
    lightColorMode: "blue"
  });
</script>

| Name | Type | Default | Description | | :--------------- | :---------: | :-------------------: | :---------- | | state | Boolean | "true" | Default light (true) or dark (false) color scheme. For data attributes use light/dark instead. | | root | String | ":root" | CSS selector for root element to apply color scheme. | | allowCookie | Boolean | "false" | Set if the user has allowed to use cookies. For data attribute the presence means true and the absence false. | | lightLabel | string/html | | Set the light toggle label. | | darkLabel | string/html | | Set the dark toggle label. | | lightColorMode | string | "light" | Set the light color scheme. | | darkColorMode | string | "dark" | Set the dark color scheme. |

Methods

Methods can be used to control the darkmode toggle directly.

<div id="bs-darkmode-toggle"></div>
<script>
  let demoElement = document.getElementById('bs-darkmode-toggle');
  demoElement.bsDarkmodeToggle({
    state: false,
    allowCookie: true,
    lightColorMode: "blue"
  });
</script>

| Method | Example | Description | | :------------ | :-------------------------------------------- | :---------------------------------------------- | | light | demoElement.bsDarkmodeToggle("light") | Enable light color scheme. | | dark | demoElement.bsDarkmodeToggle("dark") | Enable dark color scheme. | | toggle | demoElement.bsDarkmodeToggle("toggle") | Switch the enable color scheme. | | allowCookie | demoElement.bsDarkmodeToggle("allowCookie") | Set the Cookie Authorization status to allowed. | | denyCookie | demoElement.bsDarkmodeToggle("denyCookie") | Set the Cookie Authorization status to denied. |

Events

Event Propagation

When the color scheme changes a change event is fired from bootstrap darkmode toggle element. so you can listner for this event.

<div data-plugin="bs-darkmode-toggle" id="bs-darkmode-toggle"></div>

<div id="bs-darkmode-toggle"></div>
<script>
  let demoElement = document.getElementById('bs-darkmode-toggle');
  demoElement.addEventListener('Change',(_e)=>{
    //Do something
  });
</script>

Stopping Event Propagation

Passing true to the light, dark and toggle methods will enable the silent option to prevent firing the change event in cases where you want to update the color scheme but do not want to fire the change event.

Collaborators welcom!

• :sos: ¿Do you need some help? Open a question in GitHub Discussion
• :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.