Press "Enter" to skip to content

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>

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

See Demo And Download

Official Website(YuanYap): Click Here

This superior jQuery/javascript plugin is developed by YuanYap. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.