Dark Mode Switcher For Bootstrap 4

Category: Javascript | August 9, 2021
Views Total:12,829 views
Official Page:Go to website
Last Update:August 9, 2021
License:BSD 3-Clause


Dark Mode Switcher For Bootstrap 4


A tiny JavaScript & CSS implementation of the trending dark mode theme for Bootstrap 4 framework.

It saves user preference to the browser’s local storage as other dark mode plugins & scripts. jQuery and Bootstrap 4’s JS are OPTIONAL.

How to use it:

1. Load the stylesheet darktheme.css after Bootstrap’s stylesheet.

<link rel="stylesheet" href="darktheme.css" />

2. Load the core JavaScript theme.js right before the closing body tag.

<script src="theme.js"></script>

3. Load the darkswitch.js script on the webpage where you’d like to show the dark mode toggle switch. That’s it.

<script src="darkswitch.js"></script>


v0.9.1 (08/09/2021)

  • Declared sideEffects in package.json to prevent problems with Vue.

v0.9.0 (08/03/2021)

  • Added the dark-theme mixin.

v0.8.1 (07/22/2021)

  • Added support for colored list groups.
  • Added support for alerts.
  • Added support for colored borders.
  • Added support for colored tables.
  • Added some utility classes for forcing dark text.
  • Overhauled theme colors.
  • Links are now lightened on hover.
  • Improved customization with SCSS variables.
  • Split the large stylesheet into multiple partials.
  • Darkened the main background color slightly.

v0.7.0 (10/13/2020)

  • Added .bg-darkmode-black as an opposite for .bg-white.
  • Added support for data-theme=”auto”, which will automatically apply dark mode dependending on user agent preference.
  • Improved table border colors.
  • Improved horizontal rule (<hr>) color.

You Might Be Interested In:

One thought on “Dark Mode Switcher For Bootstrap 4

  1. Joe

    working on google cloud shell editor – followed the simple steps, and downloaded the given files, but still wont work for me. anything that i am missing? thx


Leave a Reply