Dark Mode For Bootstrap 5/4 - Dark Mode Switch

Dark mode is a trending UI design concept that has been adopted by most operating systems (e.g. iOS, Windows, etc) and mobile/web apps (e.g. Chrome).

This is a JavaScript plugin uses Bootstrap switches component to create a switch button which allows the user to toggle between Dark Mode and Light Mode on your webpage.

The plugin uses HTML5 local storage to save the current mode your user selected.

See also:

• Add Dark Mode To Webpage Using CSS mix-blend-mode
• 10 Best JavaScript Dark Mode Solutions

How to use it:

1. Load the stylesheet dark-mode.css and JavaScript dark-mode.js in your Bootstrap project.

<link rel="stylesheet" href="dark-mode.css">
<script src="dark-mode-switch.min.js"></script>

2. Create a Bootstrap switch to toggle between Dark Mode and Light Mode.

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

3. Override the default CSS styles when running the webpage in the Dark mode.

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

[data-theme="dark"] .bg-light {
  background-color: #333 !important;
}

[data-theme="dark"] .bg-white {
  background-color: #000 !important;
}

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

Changelog:

2021-05-18

• v1.0.1

2021-02-19

• Fixed for IE 10

2019-11-29

• JS & CSS Updated

---

This awesome jQuery plugin is developed by coliff. For more Advanced Usages, please check the demo page or visit the official website.