LICENSE code style: prettier

🌓 Dark Mode Switch

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


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