Update web/users.html

web/users.html

@@ -608,5 +608,65 @@
   });
 })();
 </script>
+<script>
+(function () {
+  // 1. Aplicar tema guardado al cargar
+  function applyTheme(theme) {
+    const lightTheme = document.getElementById('lightTheme');
+    const darkTheme  = document.getElementById('darkTheme');
+    if (theme === 'dark') {
+      lightTheme.disabled = true;
+      darkTheme.disabled  = false;
+    } else {
+      lightTheme.disabled = false;
+      darkTheme.disabled  = true;
+    }
+  }
+
+  applyTheme(localStorage.getItem('theme') || 'light');
+
+  // 2. Escuchar cambios desde OTRAS pestañas
+  window.addEventListener('storage', function(e) {
+    if (e.key === 'theme') {
+      applyTheme(e.newValue);
+    }
+  });
+
+  // 3. 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 darkTheme = document.getElementById('darkTheme');
+    const goingDark = darkTheme.disabled; // si está disabled, vamos a dark
+    overlay.style.background = goingDark ? '#fff' : '#1a1a2e';
+    overlay.style.opacity = '1';
+    setTimeout(function () {
+      const newTheme = goingDark ? 'dark' : 'light';
+      applyTheme(newTheme);
+      localStorage.setItem('theme', newTheme); // 👈 esto dispara el evento en otras pestañas
+      setTimeout(function () { overlay.style.opacity = '0'; }, 50);
+    }, 180);
+  }
+
+  document.addEventListener('DOMContentLoaded', function () {
+    const btn = document.getElementById('modeSwitcher');
+    if (!btn) return;
+    const newBtn = btn.cloneNode(true);
+    btn.parentNode.replaceChild(newBtn, btn);
+    newBtn.addEventListener('click', function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      switchTheme();
+    });
+  });
+})();
+</script>
 </body>
 </html>