Skip to content

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

License

Notifications You must be signed in to change notification settings

palcarazm/bs-darkmode-toggle

Repository files navigation

GitHub license Latest release Bootstrap 5 BS Toggle JSDelivr Badge NPM Badge Build Test Security EOL Funding

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 Bootstrap 5 Latest release

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

JSDelivr Badge

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

Latest release

NPM

NPM Badge

npm install [email protected]

Yarn

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 sun Set the light toggle label.
darkLabel string/html moon 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!

GitHub Contributors

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