Dark & Light Mode Switcher For Bootstrap 5

Preview:

Description:

Just another dark & light mode switcher component for the latest Bootstrap 5 framework.

How it works:

• Dark Mode: It checks if browser local storage has ‘lightSwitch’ key, if the key has ‘dark’ value then changes the theme to ‘dark mode’. Basically, It replaces/toggles every CSS class that has ‘-light’ class with ‘-dark’.
• Light Mode: Check whether the switch is on (checked) or not. If the switch is on then set ‘lightSwitch’ local storage key and call @function darkmode. If the switch is off then it is light mode so, switch the theme and remove ‘lightSwitch’ key from local storage.

How to use it:

1. Insert the main script switch.js into your Bootstrap 5 project.

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

2. Add the Dark & Light Mode Switcher to the page. Done.

<div class="form-check form-switch ms-auto mt-3 me-3">
  <label class="form-check-label ms-3" for="lightSwitch">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="25"
      height="25"
      fill="currentColor"
      class="bi bi-brightness-high"
      viewBox="0 0 16 16"
    >
      <path
        d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
      />
    </svg>
  </label>
  <input class="form-check-input" type="checkbox" id="lightSwitch" />
</div>

Changelog:

v0.1.5 (03/26/2023)

• Added support for dark mode navigation links

v0.1.4 (05/23/2022)

• Added fix for Bootstrap table