Update web/diagnosis.html

web/diagnosis.html

@@ -199,6 +199,11 @@
         </button>
 
         <ul class="nav">
+          <li class="nav-item">
+            <a class="nav-link text-muted my-2" href="#" id="modeSwitcher" data-mode="light">
+              <i data-feather="sun"></i>
+            </a>
+          </li>
             <li class="nav-item dropdown">
                 <a class="nav-link dropdown-toggle text-muted pr-0" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <span class="avatar avatar-sm mt-2">
@@ -1420,5 +1425,42 @@ if (false) { /* removed */ }
         _fObserver.observe(document.body, { childList: true, subtree: true });
     });
 </script>
+<script>
+(function () {
+  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;
+    overlay.style.background = goingDark ? '#fff' : '#1a1a2e';
+    overlay.style.opacity = '1';
+    setTimeout(function () {
+      lightTheme.disabled = !lightTheme.disabled;
+      darkTheme.disabled  = !darkTheme.disabled;
+      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>