Update app.py

app.py

@@ -180,78 +180,27 @@ def bridge_predict_frame(frame, st):
 # 4. Gradio 介面建構
 # ==========================================
 
-# --- [全面修正] 自動適應深色/淺色模式的 CSS ---
-adaptive_css = """
-/* === 針對深色模式 (Dark Mode) 的全面覆寫 === */
-@media (prefers-color-scheme: dark) {
-    
-    /* 1. 全域文字顏色 (預設轉為淺灰) */
-    .gradio-container, .gradio-container p, .gradio-container span, .gradio-container div {
-        color: #e2e8f0 !important;
-    }
-
-    /* 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; /* 粗體字顯示金黃色，更明顯 */
-    }
-    .prose a {
-        color: #60a5fa !important; /* 連結顯示亮藍色 */
-    }
-    .prose code {
-        color: #f472b6 !important; /* 程式碼片段顯示粉色 */
-        background-color: #334155 !important;
-    }
-
-    /* 6. 表格 (Dataframe/Table) */
-    table, th, td {
-        color: #e2e8f0 !important;
-        border-color: #475569 !important;
-        background-color: #0f172a !important; /* 表格深色背景 */
-    }
-
-    /* 7. 分頁標籤 (Tabs) */
-    .tab-nav button.selected {
-        color: #3b82f6 !important; /* 選中的 Tab 亮藍色 */
-        border-bottom-color: #3b82f6 !important;
-    }
-    .tab-nav button {
-        color: #94a3b8 !important; /* 未選中的 Tab 灰色 */
-    }
+# 定義強制標題黑色的 CSS
+force_black_title_css = """
+/* 1. 強制 Tab 分頁按鈕的文字 (如 "😊 情緒辨識 (Step 1)") 為黑色 */
+.tab-nav button {
+    color: #000000 !important;
+}
+.tab-nav button.selected {
+    color: #000000 !important; 
+    /* 如果選取時背景也是深色導致看不清，可以順便強制背景偏白：
+       background-color: #f1f5f9 !important; 
+    */
 }
 
-/* === 針對淺色模式 (Light Mode) 的確保設定 === */
-@media (prefers-color-scheme: light) {
-    .gradio-container {
-        background-color: #ffffff !important;
-    }
-    .prose, p, label, span {
-        color: #1f2937 !important; /* 深灰/黑 */
-    }
+/* 2. 強制內容中的標題 (如 "## 第一步：測測你的心情能量") 為黑色 */
+h1, h2, h3, h4, h5, h6, .prose h1, .prose h2, .prose h3 {
+    color: #000000 !important;
 }
 """
 
-# 將原本的 emotion.css 與新的全面適應 CSS 合併
-combined_css = emotion.css + adaptive_css
+# 將原本的 emotion.css 與這段強制黑色的 CSS 合併
+combined_css = emotion.css + force_black_title_css
 
 with gr.Blocks(title="AI 心情食堂", css=combined_css) as demo: