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!

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