Dark Mode Improvements

src/main/resources/static/css/home.css

@@ -10,6 +10,13 @@
 
 
 }
+.dark-mode-search {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' hei… 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") !important;
+    color: #f8f9fa !important;
+    background-color: #212529 !important;
+    border-color: #343a40 !important;
+  }
+
 
 
 .features-container {

src/main/resources/static/js/darkmode.js

@@ -1,90 +1,98 @@
-var toggleCount = 0;
+var toggleCount = 0
-var lastToggleTime = Date.now();
+var lastToggleTime = Date.now()
 
 var elements = {
   lightModeStyles: null,
   darkModeStyles: null,
   rainbowModeStyles: null,
-	darkModeIcon: null
+  darkModeIcon: null,
-};
+}
 
 function getElements() {
-	elements.lightModeStyles = document.getElementById("light-mode-styles");
+  elements.lightModeStyles = document.getElementById("light-mode-styles")
-	elements.darkModeStyles = document.getElementById("dark-mode-styles");
+  elements.darkModeStyles = document.getElementById("dark-mode-styles")
-	elements.rainbowModeStyles = document.getElementById("rainbow-mode-styles");
+  elements.rainbowModeStyles = document.getElementById("rainbow-mode-styles")
-	elements.darkModeIcon = document.getElementById("dark-mode-icon");
+  elements.darkModeIcon = document.getElementById("dark-mode-icon")
+  elements.searchBar = document.getElementById("searchBar")
+  elements.formControls = document.querySelectorAll(".form-control")
 }
 
 function setMode(mode) {
-	var event = new CustomEvent('modeChanged', { detail: mode });
+  var event = new CustomEvent("modeChanged", { detail: mode })
-    document.dispatchEvent(event);
+  document.dispatchEvent(event)
-	elements.lightModeStyles.disabled = mode !== "off";
+  elements.lightModeStyles.disabled = mode !== "off"
-	elements.darkModeStyles.disabled = mode !== "on";
+  elements.darkModeStyles.disabled = mode !== "on"
-	elements.rainbowModeStyles.disabled = mode !== "rainbow";
+  elements.rainbowModeStyles.disabled = mode !== "rainbow"
-	var jumbotron = document.getElementById('jumbotron');
+  var jumbotron = document.getElementById("jumbotron")
   if (mode === "on") {
-        elements.darkModeIcon.src = "moon.svg";
+    elements.darkModeIcon.src = "moon.svg"
+    // Dark mode improvement
+    elements.searchBar.classList.add("dark-mode-search")
+    elements.formControls.forEach(input => input.classList.add("bg-dark", "text-white"))
     // Add the table-dark class to tables for dark mode
-        var tables = document.querySelectorAll('.table');
+    var tables = document.querySelectorAll(".table")
     tables.forEach(table => {
-            table.classList.add('table-dark');
+      table.classList.add("table-dark")
-        });
+    })
     if (jumbotron) {
-        	jumbotron.classList.add('bg-dark');
+      jumbotron.classList.add("bg-dark")
-        	jumbotron.classList.remove('bg-light');
+      jumbotron.classList.remove("bg-light")
     }
   } else if (mode === "off") {
-        elements.darkModeIcon.src = "sun.svg";
+    elements.darkModeIcon.src = "sun.svg"
+    // Dark Mode Improvement
+    elements.searchBar.classList.remove("dark-mode-search")
+    elements.formControls.forEach(input => input.classList.remove("bg-dark", "text-white"))
     // Remove the table-dark class for light mode
-        var tables = document.querySelectorAll('.table-dark');
+    var tables = document.querySelectorAll(".table-dark")
     tables.forEach(table => {
-            table.classList.remove('table-dark');
+      table.classList.remove("table-dark")
-        });
+    })
     if (jumbotron) {
       console.log(mode)
-         	jumbotron.classList.remove('bg-dark');
+      jumbotron.classList.remove("bg-dark")
-         	jumbotron.classList.add('bg-light');
+      jumbotron.classList.add("bg-light")
     }
   } else if (mode === "rainbow") {
-		elements.darkModeIcon.src = "rainbow.svg";
+    elements.darkModeIcon.src = "rainbow.svg"
   }
 }
 
 function toggleDarkMode() {
-	var currentTime = Date.now();
+  var currentTime = Date.now()
   if (currentTime - lastToggleTime < 1000) {
-		toggleCount++;
+    toggleCount++
   } else {
-		toggleCount = 1;
+    toggleCount = 1
   }
-	lastToggleTime = currentTime;
+  lastToggleTime = currentTime
 
   if (toggleCount >= 18) {
-		localStorage.setItem("dark-mode", "rainbow");
+    localStorage.setItem("dark-mode", "rainbow")
-		setMode("rainbow");
+    setMode("rainbow")
   } else if (localStorage.getItem("dark-mode") == "on") {
-		localStorage.setItem("dark-mode", "off");
+    localStorage.setItem("dark-mode", "off")
-		setMode("off");
+    setMode("off")
   } else {
-		localStorage.setItem("dark-mode", "on");
+    localStorage.setItem("dark-mode", "on")
-		setMode("on");
+    setMode("on")
   }
 }
 
 document.addEventListener("DOMContentLoaded", function () {
-	getElements();
+  getElements()
 
-	var currentMode = localStorage.getItem("dark-mode");
+  var currentMode = localStorage.getItem("dark-mode")
   if (currentMode === "on" || currentMode === "off" || currentMode === "rainbow") {
-		setMode(currentMode);
+    setMode(currentMode)
   } else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
-		setMode("on");
+    setMode("on")
   } else {
-		setMode("off");
+    setMode("off")
   }
 
   document.getElementById("dark-mode-toggle").addEventListener("click", function (event) {
-		event.preventDefault();
+    event.preventDefault()
-		toggleDarkMode();
+    toggleDarkMode()
-	});
+  })
-});
+})