A Simple Dark Mode Boilerplate In Vanilla JavaScript

Vanilla JS Dark Mode is a simple template for anyone who wants to implement dark mode on their website using vanilla JavaScript.

dark mode javascript, dark mode js github, dark theme css template, scss theme switcher, create a darklight mode switch

How to make use of it:

1. Import the primary JS dark-mode-switch.min.js into your doc.

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

2. Create a checkbox that may function 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 darkish styles within the CSS.

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

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

...

Dark Mode Boilerplate In Vanilla JavaScript Plugin/Github