Skip to content
Add a dark-mode theme toggle with a Bootstrap Custom Switch
HTML JavaScript CSS
Branch: master
Clone or download
coliff Merge pull request #9 from coliff/improve-perf
Load JS early on demo page
Latest commit aa5f1c1 Jul 3, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.editorconfig Create .editorconfig Jul 3, 2019
.gitignore Create .gitignore Jul 3, 2019
LICENSE Initial commit Jul 3, 2019 Update Jul 3, 2019
dark-mode-switch.js Initial Commit Jul 3, 2019
dark-mode-switch.min.js Initial Commit Jul 3, 2019
dark-mode.css Initial Commit Jul 3, 2019
index.html Update index.html Jul 3, 2019
package.json Update package.json Jul 3, 2019

LICENSE code style: prettier

🌓 Dark Mode Switch

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

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

Quick start

Several quick start options are available:

  • Download the latest release
  • Clone the repo git clone
  • Install with npm npm install dark-mode-switch
  • Install with yarn yarn add dark-mode-switch


  1. Add your custom switch for the Dark Mode toggle followed by the dark-mode-switch.min.js script:
<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>
<script src="dark-mode-switch.min.js"></script>

Note: the JS must be loaded after the switch, but should be as early as possible to prevent CSS repainting.

  1. Edit the dark-mode.css to suit your site - the one included here is a very 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 page

Browser Support

Works well with all the browsers supported by Bootstrap


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

You can’t perform that action at this time.