dark-mode-switch
v1.0.0
Published
Dark-mode theme switch for Bootstrap with local storage preference
Downloads
667
Readme
🌓 Dark Mode Switch
Add a dark-mode theme toggle with a Bootstrap Custom Switch.
- Uses local storage to save preference
- Only 230 Bytes minified and gzipped!
Usage
- Add your custom switch for the Dark Mode toggle:
<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>
- Load
dark-mode-switch.min.js
at the foot of your page:
<script src="dark-mode-switch.min.js"></script>
- Edit the
dark-mode.css
to suit your site - the one included here is a very basic example.
How it works
Turning dark mode on will add data-theme="dark"
to the body
tag. You can use CSS to target the elements on the page like so:
[data-theme="dark"] {
background-color: #111 !important;
color: #eee;
}
Demo
Browser Support
Works well with all the browsers supported by Bootstrap
Credits
Created thanks to the excellent dark-theme and local storage tutorials over at codyhouse.co.