Bootstrap Darkmode Toggle Demo

Download This Plugin Back To jQueryScript

Create a Bootstrap 5 dark mode switch with local storage, custom color modes, and support for jQuery or vanilla JS.

Page Theme

Auto-Initialized Toggle

This control uses the library data attribute API with the toggle layout and local storage. It switches the full document theme through the default root selector.

Initialization HTML Data API

Layout Toggle

Storage local

Theme state persists in localStorage with the library storage key.

API Control

JavaScript Button Interface

This control is created through HTMLElement.bsDarkmodeToggle(). The buttons below call the plugin methods for light, dark, toggle, and storage switching.

Initialization JavaScript

Layout Button

Storage Key bs-darkmode-theme

Custom Root

Synced Multi-Root Preview

This control targets two separate surfaces through one selector. It uses a button layout, no storage, custom icon labels, and custom color mode names to prove the root and color mode options work beyond the document theme.

Surface A

Marketing Preview

The same control updates every matched root. Custom color mode names drive this isolated surface without changing the page theme.

Surface B

Dashboard Preview

The library applies the selected mode to each matching node, which makes synchronized theme islands straightforward.

Events

Change Event Stream

Each plugin instance dispatches a bubbling change event when its state changes through the public API or user interaction. Silent internal updates do not appear here.

Waiting for interactions...