Update web/diagnosis.html

web/diagnosis.html

@@ -1436,15 +1436,64 @@ if (false) { /* removed */ }
   ].join(';');
   document.body.appendChild(overlay);
 
-  function switchTheme() {
+  
+
+  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>
+<script>
+(function () {
+  // 1. Aplicar tema guardado al cargar
+  function applyTheme(theme) {
     const lightTheme = document.getElementById('lightTheme');
     const darkTheme  = document.getElementById('darkTheme');
-    const goingDark  = !darkTheme.disabled;
+    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 () {
-      lightTheme.disabled = !lightTheme.disabled;
-      darkTheme.disabled  = !darkTheme.disabled;
+      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);
   }