September 8, 2022

Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending on the lighting mode. Local storage is used to save preferences under the name lightSwitch.

An experimental dark mode switch (dark theme) for Bootstrap 5 that allows the visitor to switch between dark/light themes and saves user preferences in local storage.

bootstrap 5 dark mode toggle, bootstrap dark mode toggle, dark theme light theme bootstrap, bootstrap dark 5, dark mode website bootstrap, bootstrap 4 dark theme

How to make use of it:

1. Insert the primary script change.js into your Bootstrap 5 undertaking.

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

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

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

Dark & Light Mode Switcher For Bootstrap 5, Light Switch for Bootstrap 5 Plugin/Github, bootstrap dark background, bootstrap 4 5 dark theme


See Demo And Download

Official Website(han109k): Click Here

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

Share

You may also like...

Leave a Reply

Your email address will not be published.