Dark Mode For Bootstrap - Dark Mode Switch

Dark Mode For Bootstrap - Dark Mode Switch
File Size: 5.54 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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

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