Add a dark-mode theme toggle with a Bootstrap Custom Switch.
- Uses local storage to save preference
- Only 383 Bytes minified and gzipped!
Several quick start options are available:
- Download the latest release
- Clone the repo
git clone https://github.com/coliff/dark-mode-switch.git
- Install with npm
npm install dark-mode-switch
- Install with yarn
yarn add dark-mode-switch
- Add your custom switch for the Dark Mode toggle followed by the
dark-mode-switch.min.js
script:
Bootstrap 4.x
<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>
<script src="dark-mode-switch.min.js"></script>
Bootstrap 5.x
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="darkSwitch" />
<label class="custom-control-label" for="darkSwitch">Dark Mode</label>
</div>
<script src="dark-mode-switch.min.js"></script>
- Edit the
dark-mode.css
to suit your site - the one included here is a 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 4 and Bootstrap 5
- You need DOM Storage API in order to make this work with WebView.
- Inside OnCreate under WebView paste this line.
WebSettings.setDomStorageEnabled(true)
Created thanks to the excellent dark-theme and local storage tutorials over at codyhouse.co.