Merge pull request #460 from sanjeevneo/main
Enhance navbar for dark mode support
This commit is contained in:
commit
12f5a5e6d0
1 changed files with 18 additions and 0 deletions
|
@ -6,6 +6,11 @@ var elements = {
|
|||
darkModeStyles: null,
|
||||
rainbowModeStyles: null,
|
||||
darkModeIcon: null,
|
||||
searchBar: null,
|
||||
formControls: null,
|
||||
navbar: null,
|
||||
navIcons: null,
|
||||
navDropdownMenus: null,
|
||||
}
|
||||
|
||||
function getElements() {
|
||||
|
@ -15,6 +20,9 @@ function getElements() {
|
|||
elements.darkModeIcon = document.getElementById("dark-mode-icon")
|
||||
elements.searchBar = document.getElementById("searchBar")
|
||||
elements.formControls = document.querySelectorAll(".form-control")
|
||||
elements.navbar = document.querySelectorAll("nav.navbar")
|
||||
elements.navIcons = document.querySelectorAll("nav .icon, .navbar-icon")
|
||||
elements.navDropdownMenus = document.querySelectorAll("nav .dropdown-menu")
|
||||
}
|
||||
|
||||
function setMode(mode) {
|
||||
|
@ -29,6 +37,11 @@ function setMode(mode) {
|
|||
// Dark mode improvement
|
||||
elements.searchBar.classList.add("dark-mode-search")
|
||||
elements.formControls.forEach(input => input.classList.add("bg-dark", "text-white"))
|
||||
// navbar toggle
|
||||
elements.navbar.classList.remove("navbar-light", "bg-light")
|
||||
elements.navbar.classList.add("navbar-dark", "bg-dark")
|
||||
navDropdownMenus.forEach(menu => menu.classList.add("dropdown-menu-dark"))
|
||||
navIcons.forEach(icon => (icon.style.filter = "invert(1)"))
|
||||
// Add the table-dark class to tables for dark mode
|
||||
var tables = document.querySelectorAll(".table")
|
||||
tables.forEach(table => {
|
||||
|
@ -43,6 +56,11 @@ function setMode(mode) {
|
|||
// Dark Mode Improvement
|
||||
elements.searchBar.classList.remove("dark-mode-search")
|
||||
elements.formControls.forEach(input => input.classList.remove("bg-dark", "text-white"))
|
||||
// navbar toggle
|
||||
elements.navbar.classList.remove("navbar-dark", "bg-dark")
|
||||
elements.navbar.classList.add("navbar-light", "bg-light")
|
||||
navDropdownMenus.forEach(menu => menu.classList.remove("dropdown-menu-dark"))
|
||||
navIcons.forEach(icon => (icon.style.filter = "none"))
|
||||
// Remove the table-dark class for light mode
|
||||
var tables = document.querySelectorAll(".table-dark")
|
||||
tables.forEach(table => {
|
||||
|
|
Loading…
Reference in a new issue