Skip to content
main
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

LICENSE GitHub Super-Linter code style: prettier Best of JS GitHub Stars NPM Downloads

🌓 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

  1. 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>
  1. 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

WebSettings.setDomStorageEnabled(true)

Credits

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