Update app.py

app.py

@@ -113,40 +113,79 @@ gradio-app { background: #0b1020 !important; }
     .footer{ padding:26px 10px; text-align:center; color:#9eb2d8; }
     """
 ) as demo:
+
+    gr.HTML(topbar())
+
     gr.HTML("""
         <script>
         (function(){
-          const DARK = '#0b1020';
-          // 先把页面根背景设为深色，减少 FOUC
-          document.documentElement.style.background = DARK;
-          document.body.style.background = DARK;
+          const DARK_BG = '#0b1020';
+          const LIGHT_TXT = '#e7eefc';
+        
+          // 先把外层页面刷成深色，避免初始白一下
+          document.documentElement.style.background = DARK_BG;
+          document.body.style.background = DARK_BG;
+        
+          function injectIntoShadow() {
+            const host = document.querySelector('gradio-app');
+            if (!host || !host.shadowRoot) return false;
+        
+            const root = host.shadowRoot;
+        
+            // 1) 直接在 shadowRoot 里插入 <style>，覆盖容器背景 & 主题变量
+            const style = document.createElement('style');
+            style.setAttribute('data-jugglerl-shadow-style', '1');
+            style.textContent = `
+              :host, .gradio-container, body, html {
+                background: ${DARK_BG} !important;
+                color: ${LIGHT_TXT} !important;
+              }
+              /* 覆盖 Gradio 主题变量（不同版本命名略有区别，这里一次性全覆盖） */
+              :root {
+                --body-background-fill: ${DARK_BG} !important;
+                --background-fill-primary: ${DARK_BG} !important;
+                --background-fill-secondary: ${DARK_BG} !important;
+                --color-background: ${DARK_BG} !important;
+                --body-text-color: ${LIGHT_TXT} !important;
+                --color-foreground: ${LIGHT_TXT} !important;
+                --block-background-fill: #0f1630 !important;
+                --input-background-fill: #0f1630 !important;
+                --link-text-color: hsl(211, 100%, 70%) !important;
+              }
+              /* 常见容器兜底 */
+              .app, .container, .main, .content, .gradio-container * {
+                background-color: transparent;
+              }
+            `;
+            // 防止重复注入
+            if (!root.querySelector('style[data-jugglerl-shadow-style]')) {
+              root.appendChild(style);
+            }
+        
+            // 2) host 自身再兜底一次
+            host.style.background = DARK_BG;
         
-          function paintShadow() {
-            const app = document.querySelector('gradio-app');
-            if (!app) return false;
-            const root = app.shadowRoot;
-            if (!root) return false;
-            // host 背景
-            app.style.background = DARK;
-            // shadow 内常见容器
-            const box = root.querySelector('.gradio-container');
-            if (box) box.style.background = DARK;
             return true;
           }
         
-          if (!paintShadow()) {
-            const iv = setInterval(() => {
-              if (paintShadow()) clearInterval(iv);
-            }, 50);
-            setTimeout(() => clearInterval(iv), 5000); // 最多尝试 5s
-          }
+          // 尝试多次，直到 Gradio 的 shadowRoot 出现（Safari 上经常延迟）
+          let tries = 0;
+          const iv = setInterval(() => {
+            tries++;
+            if (injectIntoShadow() || tries > 100) { // 最多 ~5s
+              clearInterval(iv);
+            }
+          }, 50);
+        
+          // 页面可见性变化时也再尝试一次（避免 Safari 恢复前台时丢样式）
+          document.addEventListener('visibilitychange', () => {
+            if (document.visibilityState === 'visible') injectIntoShadow();
+          });
         })();
         </script>
         """)
 
 
-    gr.HTML(topbar())
-
     with gr.Row():
         with gr.Column():
             with gr.Group():