Dark Mode Boilerplate In Vanilla JavaScript

Category: Javascript , Recommended | September 7, 2021
Views Total:418 views
Official Page:Go to website
Last Update:September 7, 2021


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>

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;

You Might Be Interested In:

One thought on “Dark Mode Boilerplate In Vanilla JavaScript

  1. Evgeny

    Beautiful realization. Simple and convenient. I’ll save it for my bookmark.


Leave a Reply