Update web/index.html

web/index.html

@@ -2003,47 +2003,70 @@
   ].join(';');
   document.body.appendChild(overlay);
 
+  
+
+  // Reemplaza el comportamiento del botón existente
+  document.addEventListener('DOMContentLoaded', function () {
+    const btn = document.getElementById('modeSwitcher');
+    if (!btn) return;
+
+    // Clona el botón para eliminar listeners anteriores de apps.js
+    const newBtn = btn.cloneNode(true);
+    btn.parentNode.replaceChild(newBtn, btn);
+
+    newBtn.addEventListener('click', function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      switchTheme();
+    });
+  });
+
+})();
+</script>
+<script>
+(function () {
+  // 1. Aplicar tema guardado inmediatamente
+  const savedTheme = localStorage.getItem('theme');
+  if (savedTheme === 'dark') {
+    document.getElementById('lightTheme').disabled = true;
+    document.getElementById('darkTheme').disabled = false;
+  }
+
+  // 2. Overlay de transición
+  const overlay = document.createElement('div');
+  overlay.id = 'theme-overlay';
+  overlay.style.cssText = [
+    'position:fixed','inset:0','z-index:99999',
+    'pointer-events:none','opacity:0',
+    'transition:opacity 0.18s ease','background:#fff'
+  ].join(';');
+  document.body.appendChild(overlay);
+
   function switchTheme() {
     const lightTheme = document.getElementById('lightTheme');
     const darkTheme  = document.getElementById('darkTheme');
     const goingDark  = !darkTheme.disabled;
-
-    // El overlay es blanco al ir a dark, negro al ir a light
     overlay.style.background = goingDark ? '#fff' : '#1a1a2e';
-
-    // 1. Fade IN del overlay (tapa la página)
     overlay.style.opacity = '1';
-
     setTimeout(function () {
-
-      // 2. Cambia el tema mientras está tapado
       lightTheme.disabled = !lightTheme.disabled;
       darkTheme.disabled  = !darkTheme.disabled;
-
-      // 3. Fade OUT del overlay (revela el nuevo tema)
-      setTimeout(function () {
-        overlay.style.opacity = '0';
-      }, 50);
-
+      localStorage.setItem('theme', darkTheme.disabled ? 'light' : 'dark');
+      setTimeout(function () { overlay.style.opacity = '0'; }, 50);
     }, 180);
   }
 
-  // Reemplaza el comportamiento del botón existente
   document.addEventListener('DOMContentLoaded', function () {
     const btn = document.getElementById('modeSwitcher');
     if (!btn) return;
-
-    // Clona el botón para eliminar listeners anteriores de apps.js
     const newBtn = btn.cloneNode(true);
     btn.parentNode.replaceChild(newBtn, btn);
-
     newBtn.addEventListener('click', function (e) {
       e.preventDefault();
       e.stopPropagation();
       switchTheme();
     });
   });
-
 })();
 </script>
 </body>