Bootstrap 4 Dark Mode Documentation

This mobile-friendly Dark Mode vs. Light Mode toggler was made entirely with Bootstrap 4, a couple of custom styles and some JS functions. To see the effect, simply click on the button below. To use it in your own projects, you need to make sure ALL your text-level elements make use of Bootstrap's text{-light|-dark|-white} class and your containers/wrappers/background elements use Bootstrap's bg{-light|-white|-dark} classes. Optionally, you may use the text-black and bg-black classes that ship with this package.

Getting Started

By default, the page-display-mode element, which dictates the state of the page, is always set to "light" upon page load. To get started, you'll need to go over the following steps:

1. Make sure ALL text-level elements have a text{-light|-dark|-white|-black} class.
2. Make sure ALL wrappers, containers, and background elements have a bg{-light|-dark|-white|-black} class.
3. Inlcude dark-mode.css and dark_mode.js in your project.
4. In the body element of your views, BE SURE TO ADD onload="createPageStateElement()" as an attribute.

Dark Mode CSS

The only custom CSS needed is shown below:

Copy!

.bg-black {
  background-color: #1f1f1f;
}

.text-black {
  color: #1f1f1f;
}

Feel free to customize the hexadecimal value of the bg-black and text-black class' background-color property to your liking.

Dark Mode JavaScript

The JavaScript needed (in addition to Bootstrap's core JS) is documented below. Be sure to include the dark_mode.js file as a script before the end of the body tag.

Copy!

function toggleDisplayMode() {
  var e_page_state = document.getElementById("page-display-mode")
  var page_state = e_page_state.innerHTML;

  /* Dark Mode Variables */
  var e_text_dark = document.querySelectorAll(".text-dark");
  var e_text_black = document.querySelectorAll(".text-black");
  var e_bg_dark = document.querySelectorAll(".bg-dark");
  var e_bg_black = document.querySelectorAll(".bg-black");

  /* Light Mode Variables */
  var e_text_light = document.querySelectorAll(".text-light");
  var e_text_white = document.querySelectorAll(".text-white");
  var e_bg_light = document.querySelectorAll(".bg-light");
  var e_bg_white = document.querySelectorAll(".bg-white");

  /* Other Elements */
  var e_cards = document.querySelectorAll(".card");

  // Switch from Light to Dark Mode
  if (page_state == "light") {
    switchClasses(e_text_dark, "text-dark", "text-light");
    switchClasses(e_text_black, "text-black", "text-white");
    switchClasses(e_bg_light, "bg-light", "bg-dark");
    switchClasses(e_bg_white, "bg-white", "bg-black");
    addClass(e_cards, "border-dark");
  }
  // Switch from Dark to Light Mode
  else if (page_state == "dark") {
    switchClasses(e_text_light, "text-light", "text-dark");
    switchClasses(e_text_white, "text-white", "text-black");
    switchClasses(e_bg_dark, "bg-dark", "bg-light");
    switchClasses(e_bg_black, "bg-black", "bg-white");
    removeClass(e_cards, "border-dark");
  }

  // Update page state
  e_page_state.innerHTML = switchState(page_state);
}

function switchClasses(elements, fromClass, toClass) {
  for(let elem of elements) {
    if (elem.classList.contains(fromClass)) {
      elem.classList.remove(fromClass);
      elem.classList.add(toClass);
    }
  }

  return true;
}

function addClass(elements, className) {
  for (let elem of elements) {
    if (!elem.classList.contains(className)) {
      elem.classList.add(className);
    }
  }
}

function removeClass(elements, className) {
  for (let elem of elements) {
    if (elem.classList.contains(className)) {
      elem.classList.remove(className);
    }
  }
}

function switchState(state) {
  switch(state) {
    case "light":
      state = "dark"; 
      break;
    case "dark":
      state = "light";
      break;
    default:
      state = "undefined";
  }

  return state;
}

function createPageStateElement() {
  var div = document.createElement("div");
  var id = "page-display-mode";
  var init_mode = document.createTextNode("light");
  div.appendChild(init_mode)
  div.id = id;
  div.classList.add("d-none");
  document.getElementsByTagName("body")[0].appendChild(div);
}

window.toggleDisplayMode = toggleDisplayMode;
window.createPageStateElement = createPageStateElement;

What's Currently Supported?

As of today, all HTML elements (paragraphs, headers, lists, divs, etc.) which make use of Bootstrap's text{-light|-dark|-white} and/or bg{-light|-white|-dark} classes are supported. Additionally, elements may also call the custom text-black and bg-black classes in dark-mode.css.

However, the following are currently not supported when toggling to and from Dark Mode:

horizontal rules (<hr>)
Bootstrap dropdown links
input elements (<input>)

That's all there is to it! Now go code something.Back to Top