Press "Enter" to skip to content

Toggle Dark Mode Theme With The Dedicated Bootstrap Switch

Dark Mode Switch is a popular UI design concept that has been adopted by most operating systems (like iOS, Windows, etc.) and mobile / web apps).

This JavaScript plugin uses the Bootstrap Keys component to create a toggle that allows the user to toggle between Dark Mode and Light Mode on your webpage. The plugin uses HTML5 local storage to save the current profile selected by the user.

How to make use of it:

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

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

2. Create a Bootstrap swap 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 types when working the webpage within 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;
}

Dark Mode Swap For Bootstrap, Dark Mode Switch Plugin/Github


See Demo And Download

Official Website(coliff): Click Here

This superior jQuery/javascript plugin is developed by coliff. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.