Merge pull request #798: Fix dark mode inconsistencies on chat and vault pages

Author: devanshi14malhotra

frontend/pages/chat.html

@@ -10,6 +10,36 @@
                 document.documentElement.setAttribute('data-theme', 'night');
             }
         })();
+
+        document.addEventListener('DOMContentLoaded', function () {
+            const btn = document.getElementById('themeToggle');
+            if (!btn) return;
+
+            const icon = btn.querySelector('i');
+            const STORAGE_KEY = 'bibliodrift_theme';
+
+            function applyTheme(theme) {
+                if (theme === 'night') {
+                    document.documentElement.setAttribute('data-theme', 'night');
+                    if (icon) icon.className = 'fa-solid fa-sun';
+                } else {
+                    document.documentElement.removeAttribute('data-theme');
+                    if (icon) icon.className = 'fa-solid fa-moon';
+                }
+
+                localStorage.setItem(STORAGE_KEY, theme);
+                if (typeof restoreTheme === 'function') restoreTheme();
+            }
+
+            const savedTheme = localStorage.getItem(STORAGE_KEY) || 'light';
+            applyTheme(savedTheme);
+
+            btn.addEventListener('click', function () {
+                const current = document.documentElement.getAttribute('data-theme') === 'night' ? 'night' : 'light';
+                const next = current === 'night' ? 'light' : 'night';
+                applyTheme(next);
+            });
+        });
     </script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Chat with Elara | BiblioDrift</title>

frontend/pages/vault.html

@@ -18,8 +18,10 @@
 
   <script>
     (function () {
-      const theme = localStorage.getItem('bibliodrift_theme') || 'dark';
-      document.documentElement.setAttribute('data-theme', theme);
+      const theme = localStorage.getItem('bibliodrift_theme');
+      if (theme === 'night') {
+        document.documentElement.setAttribute('data-theme', 'night');
+      }
     })();
   </script>
 
@@ -699,7 +701,7 @@ <h3 style="color: var(--text-main) !important;">Ambient Sanctuary</h3>
 
       function updateThemeToggleButton(currentTheme) {
         const icon = themeToggle.querySelector("i");
-        if (currentTheme === "night" || currentTheme === "dark") {
+        if (currentTheme === "night") {
           icon.className = "fa-solid fa-sun";
           themeToggle.setAttribute("title", "Switch to Light Mode");
         } else {
@@ -712,9 +714,13 @@ <h3 style="color: var(--text-main) !important;">Ambient Sanctuary</h3>
 
       themeToggle.addEventListener("click", () => {
         const activeTheme = document.documentElement.getAttribute('data-theme');
-        const nextTheme = (activeTheme === "dark" || activeTheme === "night") ? "light" : "dark";
+        const nextTheme = (activeTheme === "night") ? "light" : "night";
 
-        document.documentElement.setAttribute('data-theme', nextTheme);
+        if (nextTheme === "night") {
+          document.documentElement.setAttribute('data-theme', 'night');
+        } else {
+          document.documentElement.removeAttribute('data-theme');
+        }
         localStorage.setItem('bibliodrift_theme', nextTheme);
         if (typeof restoreTheme === 'function') restoreTheme();
         updateThemeToggleButton(nextTheme);