Add a dark-mode theme toggle with a Bootstrap Custom Switch.
<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>
dark-mode-switch.min.js
at the foot of your page:<script src="dark-mode-switch.min.js"></script>
dark-mode.css
to suit your site - the one included here is a very basic example.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;
}
Works well with all the browsers supported by Bootstrap
Created thanks to the excellent dark-theme and local storage tutorials over at codyhouse.co.