Author: | han109k |
---|---|
Views Total: | 6,103 views |
Official Page: | Go to website |
Last Update: | March 26, 2023 |
License: | MIT |
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