Merge pull request Stirling-Tools#460 from sanjeevneo/main

Enhance navbar for dark mode support
gezishu · Nov 2, 2023 · 12f5a5e · 12f5a5e
2 parents 18c5f5b + f85a7cb
commit 12f5a5e
Showing 1 changed file with 18 additions and 0 deletions.
diff --git a/src/main/resources/static/js/darkmode.js b/src/main/resources/static/js/darkmode.js
@@ -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 => {