Update app.py

app.py

@@ -180,49 +180,77 @@ def bridge_predict_frame(frame, st):
 # 4. Gradio 介面建構
 # ==========================================
 
-# --- [新增] 自動適應深色/淺色模式的 CSS ---
-# 這段 CSS 會偵測瀏覽器設定，強制將 Markdown 區塊 (.prose) 的文字顏色反轉
+# --- [全面修正] 自動適應深色/淺色模式的 CSS ---
 adaptive_css = """
+/* === 針對深色模式 (Dark Mode) 的全面覆寫 === */
 @media (prefers-color-scheme: dark) {
-    /* 深色模式：文字變淺灰/白 */
-    .prose, .prose > p, .prose > ul > li, .prose > ol > li, .prose span {
-        color: #e2e8f0 !important; 
+    
+    /* 1. 全域文字顏色 (預設轉為淺灰) */
+    .gradio-container, .gradio-container p, .gradio-container span, .gradio-container div {
+        color: #e2e8f0 !important;
     }
-    /* 標題變全白 */
-    .prose h1, .prose h2, .prose h3, .prose h4 {
+
+    /* 2. 標題 (H1-H6) 轉為亮白 */
+    h1, h2, h3, h4, h5, h6 {
         color: #f8fafc !important;
     }
-    /* 粗體字變亮 */
+
+    /* 3. 輸入框與文字區 (Textbox, Textarea) - 確保深底白字 */
+    textarea, input[type="text"], .gr-input {
+        background-color: #1e293b !important; /* 深藍灰背景 */
+        color: #ffffff !important;            /* 純白文字 */
+        border-color: #475569 !important;     /* 邊框顏色 */
+    }
+
+    /* 4. 標籤 (Label) 與 選項 (Radio/Checkbox) */
+    label, .block-label, span.ml-2 {
+        color: #cbd5e1 !important; /* 稍微柔和的淺灰 */
+    }
+    
+    /* 5. Markdown 內容區塊 (.prose) */
+    .prose {
+        color: #e2e8f0 !important;
+    }
     .prose strong {
-        color: #fbbf24 !important; /* 稍微帶一點金黃色讓重點突出，或改 #ffffff */
+        color: #fbbf24 !important; /* 粗體字顯示金黃色，更明顯 */
+    }
+    .prose a {
+        color: #60a5fa !important; /* 連結顯示亮藍色 */
+    }
+    .prose code {
+        color: #f472b6 !important; /* 程式碼片段顯示粉色 */
+        background-color: #334155 !important;
     }
-    /* 表格文字 */
-    .prose table, .prose th, .prose td {
+
+    /* 6. 表格 (Dataframe/Table) */
+    table, th, td {
         color: #e2e8f0 !important;
         border-color: #475569 !important;
+        background-color: #0f172a !important; /* 表格深色背景 */
     }
-    /* Label 標籤文字 (如 "AI 回應", "心情日記") */
-    span.svelte-1gfkn6j, label.svelte-1gfkn6j, .block-label {
-        color: #e2e8f0 !important;
+
+    /* 7. 分頁標籤 (Tabs) */
+    .tab-nav button.selected {
+        color: #3b82f6 !important; /* 選中的 Tab 亮藍色 */
+        border-bottom-color: #3b82f6 !important;
     }
-    /* 除錯 Markdown 區塊 */
-    .markdown-body {
-        color: #e2e8f0 !important;
+    .tab-nav button {
+        color: #94a3b8 !important; /* 未選中的 Tab 灰色 */
     }
 }
 
+/* === 針對淺色模式 (Light Mode) 的確保設定 === */
 @media (prefers-color-scheme: light) {
-    /* 淺色模式：確保文字是深色 (防止預設主題干擾) */
-    .prose, .prose > p, .prose > ul > li, .prose > ol > li {
-        color: #1f2937 !important;
+    .gradio-container {
+        background-color: #ffffff !important;
     }
-    .prose h1, .prose h2, .prose h3 {
-        color: #111827 !important;
+    .prose, p, label, span {
+        color: #1f2937 !important; /* 深灰/黑 */
     }
 }
 """
 
-# 將原本的 emotion.css 與新的適應性 CSS 合併
+# 將原本的 emotion.css 與新的全面適應 CSS 合併
 combined_css = emotion.css + adaptive_css
 
 with gr.Blocks(title="AI 心情食堂", css=combined_css) as demo: