session persistent Items Per Page & dark/light modes

main.js

@@ -1,17 +1,15 @@
-// main.js
-
 import { sendRequest } from './networkUtils.js';
-import { 
-  toggleVisibility, 
-  toggleAllCheckboxes, 
+import {
+  toggleVisibility,
+  toggleAllCheckboxes,
   updateFileActionButtons,
   showToast
 } from './domUtils.js';
-import { 
-  loadFileList, 
-  initFileActions, 
-  editFile, 
-  saveFile, 
+import {
+  loadFileList,
+  initFileActions,
+  editFile,
+  saveFile,
   displayFilePreview,
   renameFile
 } from './fileManager.js';
@@ -27,38 +25,66 @@ window.editFile = editFile;
 window.saveFile = saveFile;
 window.renameFile = renameFile;
 
-
 // Global variable for the current folder.
 window.currentFolder = "root";
 
-// DOMContentLoaded initialization.
-
 document.addEventListener("DOMContentLoaded", function () {
   // Call initAuth synchronously.
   initAuth();
 
-  // Check OS theme preference & apply dark mode
-  if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
-      document.body.classList.add("dark-mode"); // Enable dark mode if OS is set to dark
-  }
-
-  // Listen for real-time OS theme changes
-  window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => {
-      if (event.matches) {
-          document.body.classList.add("dark-mode"); // Enable dark mode
-      } else {
-          document.body.classList.remove("dark-mode"); // Disable dark mode
-      }
-  });
-
-  // ✅ Fix the Button Label on Page Load
+  // --- Dark Mode Persistence ---
+  // Get the dark mode toggle button.
   const darkModeToggle = document.getElementById("darkModeToggle");
-  if (document.body.classList.contains("dark-mode")) {
-      darkModeToggle.textContent = "Light Mode";
+  // Retrieve stored user preference (if any).
+  const storedDarkMode = localStorage.getItem("darkMode");
+
+  // Apply stored preference; if none, fall back to OS setting.
+  if (storedDarkMode === "true") {
+    document.body.classList.add("dark-mode");
+  } else if (storedDarkMode === "false") {
+    document.body.classList.remove("dark-mode");
   } else {
-      darkModeToggle.textContent = "Dark Mode";
+    if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      document.body.classList.add("dark-mode");
+    } else {
+      document.body.classList.remove("dark-mode");
+    }
   }
 
+  // Set the initial button label.
+  if (darkModeToggle) {
+    darkModeToggle.textContent = document.body.classList.contains("dark-mode")
+      ? "Light Mode"
+      : "Dark Mode";
+
+    // When clicked, toggle dark mode and store preference.
+    darkModeToggle.addEventListener("click", function () {
+      if (document.body.classList.contains("dark-mode")) {
+        document.body.classList.remove("dark-mode");
+        localStorage.setItem("darkMode", "false");
+        darkModeToggle.textContent = "Dark Mode";
+      } else {
+        document.body.classList.add("dark-mode");
+        localStorage.setItem("darkMode", "true");
+        darkModeToggle.textContent = "Light Mode";
+      }
+    });
+  }
+
+  // Listen for OS theme changes if no user preference is set.
+  if (localStorage.getItem("darkMode") === null && window.matchMedia) {
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => {
+      if (event.matches) {
+        document.body.classList.add("dark-mode");
+        if (darkModeToggle) darkModeToggle.textContent = "Light Mode";
+      } else {
+        document.body.classList.remove("dark-mode");
+        if (darkModeToggle) darkModeToggle.textContent = "Dark Mode";
+      }
+    });
+  }
+  // --- End Dark Mode Persistence ---
+
   const message = sessionStorage.getItem("welcomeMessage");
   if (message) {
     showToast(message);
@@ -76,4 +102,4 @@ document.addEventListener("DOMContentLoaded", function () {
       console.warn("User not authenticated. Data loading deferred.");
     }
   });
-});
+});