🌓 Dark Mode Switch

Add a dark-mode theme toggle with a Bootstrap Custom Switch.

Uses local storage to save preference
Only 383 Bytes minified and gzipped!

Quick start

Several quick start options are available:

Download the latest release
Clone the repo git clone https://github.com/coliff/dark-mode-switch.git
Install with npm npm install dark-mode-switch
Install with yarn yarn add dark-mode-switch

Usage

Add your custom switch for the Dark Mode toggle followed by the dark-mode-switch.min.js script:

Bootstrap 4.x

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="darkSwitch" />
  <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
</div>
<script src="dark-mode-switch.min.js"></script>

Bootstrap 5.x

<div class="form-check form-switch">
  <input type="checkbox" class="form-check-input" id="darkSwitch" />
  <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
</div>
<script src="dark-mode-switch.min.js"></script>

Edit the dark-mode.css to suit your site - the one included here is a basic example.

How it works

Turning dark mode on will add data-theme="dark" to the body tag. You can use CSS to target the elements on the page like so:

[data-theme="dark"] {
  background-color: #111 !important;
  color: #eee;
}

Demo

Bootstrap 5 Demo page

Browser Support

Works well with all the browsers supported by Bootstrap 4 and Bootstrap 5

To Enable DarkMode in Android Webview

You need DOM Storage API in order to make this work with WebView.
Inside OnCreate under WebView paste this line.

WebSettings.setDomStorageEnabled(true)

Credits

Created thanks to the excellent dark-theme and local storage tutorials over at codyhouse.co.