Dark Mode For Bootstrap - Dark Mode Switch
웹비젼
jQuery
0
577
2022.02.28 08:38
https://www.jqueryscript.net/demo/dark-mode-bootstrap/ + 95
다운로드시 10,000MP 차감 (최초 1회 / 재다운로드시 무료)
+ 0
dark-mode-bootstrap.zip (12.0K)
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;
}