Merge pull request #797 from aslams2020/main

feat: Resolved Dark Mode Persistance Issue After refreshing

Theme.js

@@ -16,18 +16,28 @@
 const themeToggle = document.getElementById("themeToggle");
 const themeLabel = document.querySelector(".toggle-label");
 
-themeToggle.addEventListener("change", () => {
-  document.body.classList.toggle("dark-theme");
-
-  if (document.body.classList.contains("dark-theme")) {
-    themeLabel.style.background = "#fff"; // Adjust color for the checked state as needed
-    console.log("Dark theme");
-    document.body.classList.remove("dark-theme");
-    document.body.classList.add("light-theme");
-  } else {
-    themeLabel.style.background = "var(--primary-color)"; // Adjust color for the unchecked state as needed
-    console.log("Light theme");
-    document.body.classList.remove("light-theme");
+function applyTheme(theme) {
+  if (theme === "dark") {
     document.body.classList.add("dark-theme");
+    document.body.classList.remove("light-theme");
+    themeLabel.style.background = "var(--primary-color)";
+    themeToggle.checked = true;
+  } else {
+    document.body.classList.add("light-theme");
+    document.body.classList.remove("dark-theme");
+    themeLabel.style.background = "#fff";
+    themeToggle.checked = false; 
   }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  const savedTheme = localStorage.getItem("theme") || "light"; 
+  applyTheme(savedTheme);
 });
+
+themeToggle.addEventListener("change", () => {
+  const theme = themeToggle.checked ? "dark" : "light";
+  localStorage.setItem("theme", theme); 
+  applyTheme(theme);
+});
+