Dark Mode Switch

Add a dark-mode theme toggle with a Bootstrap Custom Switch

coliff/dark-mode-switchcoliff.github.io/dark-mode-switch/dark-mode-switch

README

LICENSE GitHub Super-Linter code style: prettier Best of JS GitHub Stars NPM Downloads

🌓 Dark Mode Switch


Add a dark-mode theme toggle with a Bootstrap Custom Switch.

- Uses local storage to save preference
- Only 262 Bytes minified and gzipped!

Quick start


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 npmnpm install dark-mode-switch
- Install with yarnyarn add dark-mode-switch

Usage


1. Add your custom switch for the Dark Mode toggle followed by the dark-mode-switch.min.js script:

  1. ``` html
  2. <div class="custom-control custom-switch">
  3.   <input type="checkbox" class="custom-control-input" id="darkSwitch" />
  4.   <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
  5. </div>
  6. <script src="dark-mode-switch.min.js"></script>
  7. ```

2. 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:

  1. ```css
  2. [data-theme="dark"] {
  3.   background-color: #111 !important;
  4.   color: #eee;
  5. }
  6. ```

Demo


Demo page

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.