Dark Mode Boilerplate In Vanilla JavaScript

Category: Javascript , Recommended | September 7, 2021
Author:YuanYap
Views Total:120 views
Official Page:Go to website
Last Update:September 7, 2021
License:MIT

Preview:

Dark Mode Boilerplate In Vanilla JavaScript

Description:

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

...

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.

    Reply

Leave a Reply