Dark Mode For Bootstrap - Dark Mode Switch

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

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:

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:

2019-11-29


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