This time I will share jQuery Plugin and tutorial about Dark Mode For Bootstrap – Dark Mode Switch, hope it will help you in programming stack.
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.
How to use it:
1. Load the stylesheet dark-mode.css and JavaScript dark-mode.js in your Bootstrap project.
1 |
<link rel="stylesheet" href="dark-mode.css"> |
2 |
<script src="dark-mode-switch.min.js"></script> |
2. Create a Bootstrap switch to toggle between Dark Mode and Light Mode.
1 |
<div class="custom-control custom-switch"> |
2 |
<input type="checkbox" class="custom-control-input" id="darkSwitch"> |
3 |
<label class="custom-control-label" for="darkSwitch">Dark Mode</label> |
3. Override the default CSS styles when running the webpage in the Dark mode.
02 |
background-color: #111 !important; |
06 |
[data-theme="dark"] .bg-light { |
07 |
background-color: #333 !important; |
10 |
[data-theme="dark"] .bg-white { |
11 |
background-color: #000 !important; |
14 |
[data-theme="dark"] .bg-black { |
15 |
background-color: #eee !important; |
Changelog:
2021-02-19
2019-11-29
