Dark Mode Boilerplate In Vanilla JavaScript

A lightweight dark mode boilerplate that makes it easier to implement Dark Mode using vanilla JavaScript and web storage (local storage).

How to use it:

1. Import the main JS dark-mode-switch.min.js into your document.

<script src=”dark-mode-switch.min.js”></script>

2. Create a checkbox that will serve as a toggle switch for dark mode.

<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>

3. Create dark styles in the CSS.

[data-theme="dark"] {
  background-color: #111 !important;
  color: #eee;
}
[data-theme="dark"] .bg-black {
  background-color: #fff !important;
}
...