修明暗切換在使用者自己的 Chrome 沒作用（Gradio 容器 class 蓋過我的切換）

千卉回報「你開的 Chrome 可以，我自己開的不行，已 Ctrl+Shift+R」。這個差異
正是關鍵線索——追出兩個真因：

1. 切換只作用在 <html>，蓋不過 Gradio 自己的 class
Gradio 會依自己的主題設定／系統偵測，在 .gradio-container 上掛 dark class。
CSS 自訂屬性是「離內容最近的祖先勝出」，html.light 蓋不過
.gradio-container.dark，所以點了畫面完全沒變化。我的 Playwright Chrome
是淺色系統、Gradio 不會加那個 class，因此自動測試一直測不出來。
修法：偏好同時套到 html／body／.gradio-container 三處，並在既有 400ms 輪詢
裡持續自我修正（Gradio 重繪會把自己的 class 加回來），沿用本檔既有的
「輪詢自我修正」解法。

2. _effectiveDark() 判斷的是「系統設定」而非「畫面實際狀態」
沒有存過偏好時原本直接問 matchMedia(prefers-color-scheme)。但畫面可能已經
因為 Gradio 而是深色，matchMedia 卻回報淺色 → 第一次點擊算成「要轉深」→
使用者看到「按了沒變化」。改成先看畫面上真的有沒有 dark class，再退回問系統。

順帶把圖示切換改成結構上不可能壞的做法：兩個 SVG 都常駐 DOM，只用 CSS 依
data-theme-icon 切換顯示，JS 不再改寫 innerHTML（改寫會銷毀重建 <svg>，真人
點擊的 mousedown/mouseup 一旦跨到重建就不會產生 click）。移除已無用的
_MOON/_SUN JS 常數。

驗證方式：手動在 .gradio-container 加 dark class 重現「Gradio 深色」情境（我的
系統是淺色，無法直接複現），實測點擊可正確移除／加回該 class、chat-col 與氣泡
底色雙向切換、輪詢 1.6 秒後不會被搶回去。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

app_agent.py

@@ -2827,6 +2827,12 @@ img.button-icon { opacity: .82; }
 .nav-collapse-toggle:active, .nav-icon-btn:active {
     background: rgba(var(--c-accent-rgb),.16);
 }
+/* 明暗切換鈕：兩個圖示常駐 DOM，只用 CSS 切換顯示（預設淺色→顯示月亮，
+   代表「點了會變深色」）。JS 只改 data-theme-icon，不動 DOM 結構。 */
+#theme_toggle .ico-moon { display: inline-flex; }
+#theme_toggle .ico-sun  { display: none; }
+#theme_toggle[data-theme-icon="dark"] .ico-moon { display: none; }
+#theme_toggle[data-theme-icon="dark"] .ico-sun  { display: inline-flex; }
 .nav-collapse-toggle:focus-visible, .nav-drawer-close:focus-visible,
 .mobile-nav-toggle:focus-visible, .nav-icon-btn:focus-visible {
     outline: 2px solid var(--c-accent); outline-offset: 2px;
@@ -3758,14 +3764,49 @@ _APP_HEAD_SCRIPT = """
            =系統深色。所以 html.dark→強制深、html.light→強制淺（贏過系統深色的
            媒體規則）、都沒有→跟隨系統。切換鈕在 nav-col 裡（工作區才有），但
            _loadTheme 在頁面一載入就套用存好的偏好，首頁也吃得到。 */
-        var _MOON = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.8A8.5 8.5 0 1 1 11.2 3a6.6 6.6 0 0 0 9.8 9.8z"/></svg>';
-        var _SUN = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4.2"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>';
+        /* 圖示 SVG 直接寫在按鈕裡（見 create_app 的 theme_toggle），顯示切換
+           交給 CSS 的 #theme_toggle[data-theme-icon]，這裡不再持有 SVG 字串。 */
+        /* 踩坑（2026-07-24，千卉回報「我自己開的 Chrome 按了沒用，你開的可以」）：
+           原本只在 <html> 加 .dark/.light。但**當使用者的系統是深色時，Gradio 自己
+           會偵測並在它的容器（.gradio-container／body）上加 dark class**，而 CSS 自訂
+           屬性是「離內容最近的祖先勝出」——html.light 蓋不過 .gradio-container.dark，
+           所以點了畫面完全沒變化。我的 Playwright Chrome 是淺色系統、Gradio 不會加
+           那個 class，因此自動測試一直測不出來。
+           修法：偏好要同時套到 html／body／.gradio-container 三處，並在輪詢裡持續
+           自我修正（Gradio 重繪時會把自己的 class 加回來）。 */
+        function _themeTargets() {
+            return [document.documentElement, document.body,
+                    document.querySelector('.gradio-container')].filter(Boolean);
+        }
+        function _savedTheme() {
+            try { return localStorage.getItem('spectra_theme'); } catch (err) { return null; }
+        }
+        /* 判斷「目前畫面實際是深是淺」。踩坑：原本沒有偏好時直接問
+           matchMedia(prefers-color-scheme)，但 Gradio 可能因為自己的主題設定或
+           系統偵測，已經在容器上掛了 dark class——此時畫面明明是深色，matchMedia
+           卻可能回報淺色，於是第一次點擊算出「要轉深」，使用者看到的是「按了
+           沒變化」。改成先看畫面上真的有沒有 dark class，再退回問系統。 */
         function _effectiveDark() {
-            var r = document.documentElement;
-            if (r.classList.contains('dark')) return true;
-            if (r.classList.contains('light')) return false;
+            var saved = _savedTheme();
+            if (saved === 'dark') return true;
+            if (saved === 'light') return false;
+            var applied = _themeTargets().some(function (el) {
+                return el.classList.contains('dark');
+            });
+            if (applied) return true;
             return window.matchMedia('(prefers-color-scheme: dark)').matches;
         }
+        /* 把使用者選的偏好壓在三個層級上；沒有偏好（跟隨系統）就完全不干預，
+           讓 Gradio 與媒體查詢自己決定。 */
+        function _applyThemeClasses() {
+            var saved = _savedTheme();
+            if (!saved) return;
+            var dark = saved === 'dark';
+            _themeTargets().forEach(function (el) {
+                if (el.classList.contains('dark') !== dark) el.classList.toggle('dark', dark);
+                if (el.classList.contains('light') === dark) el.classList.toggle('light', !dark);
+            });
+        }
         function _applyThemeIcon() {
             var btn = document.getElementById('theme_toggle');
             if (!btn) return;
@@ -3779,27 +3820,20 @@ _APP_HEAD_SCRIPT = """
                修法：狀態沒變就不要動 DOM。 */
             var want = dark ? 'dark' : 'light';
             if (btn.dataset.themeIcon === want) return;
+            /* 只改屬性，圖示顯示交給 CSS（#theme_toggle[data-theme-icon]）——
+               DOM 結構完全不動，click 不會因為子元素被重建而消失。 */
             btn.dataset.themeIcon = want;
-            /* 顯示「切換後會變成」的那一個：目前深色就顯示太陽（點了轉淺）。 */
-            btn.innerHTML = dark ? _SUN : _MOON;
             btn.setAttribute('aria-label', dark ? '切換為淺色模式' : '切換為深色模式');
         }
         function _loadTheme() {
-            var saved = null;
-            try { saved = localStorage.getItem('spectra_theme'); } catch (err) {}
-            var r = document.documentElement;
-            r.classList.remove('dark', 'light');
-            if (saved === 'dark') r.classList.add('dark');
-            else if (saved === 'light') r.classList.add('light');
+            _applyThemeClasses();
             _applyThemeIcon();
         }
         document.addEventListener('click', function (e) {
             if (!(e.target.closest && e.target.closest('#theme_toggle'))) return;
             var toDark = !_effectiveDark();
-            var r = document.documentElement;
-            r.classList.remove('dark', 'light');
-            r.classList.add(toDark ? 'dark' : 'light');
             try { localStorage.setItem('spectra_theme', toDark ? 'dark' : 'light'); } catch (err) {}
+            _applyThemeClasses();
             _applyThemeIcon();
         });
         _loadTheme();
@@ -4162,7 +4196,11 @@ _APP_HEAD_SCRIPT = """
             _initActivePageIfNeeded();
             _reapplyActivePage();
             _syncUnloadGuard();
-            _applyThemeIcon();   /* theme_toggle 在工作區才掛載，掛上後補正圖示 */
+            /* Gradio 重繪時會把自己偵測系統主題加的 dark class 加回容器上，
+               這裡持續把使用者選的偏好壓回去（跟本檔其他「輪詢自我修正」同一套
+               解法）。theme_toggle 在工作區才掛載，圖示也一併補正。 */
+            _applyThemeClasses();
+            _applyThemeIcon();
         }, 400);
     }
     if (document.readyState === 'loading') {
@@ -4328,8 +4366,15 @@ def create_app():
                     '<div class="nav-top-row">'
                     '<span class="nav-brand en">SpectraEngine</span>'
                     '<div class="nav-top-actions">'
+                    # 兩個圖示都先放進去、用 CSS 依 data-theme-icon 切換顯示。
+                    # 不用 JS 改寫 innerHTML：改寫會把 <svg> 銷毀重建，真人點擊的
+                    # mousedown/mouseup 一旦跨到重建就不會產生 click（見
+                    # _applyThemeIcon 註解）。DOM 不動就沒有這個風險。
                     f'<button type="button" id="theme_toggle" class="nav-icon-btn" '
-                    f'aria-label="切換為深色模式">{_icon("moon", 18)}</button>'
+                    f'aria-label="切換為深色模式">'
+                    f'<span class="ico-moon">{_icon("moon", 18)}</span>'
+                    f'<span class="ico-sun">{_icon("sun", 18)}</span>'
+                    f'</button>'
                     f'<button type="button" id="nav_collapse_toggle" class="nav-collapse-toggle" '
                     f'aria-label="收合導覽列" aria-expanded="true">{_icon("chevron-double-left", 18)}</button>'
                     '</div>'