Update app.py

app.py

@@ -180,7 +180,50 @@ def bridge_predict_frame(frame, st):
 # 4. Gradio 介面建構
 # ==========================================
 
-combined_css = emotion.css 
+# --- [新增] 自動適應深色/淺色模式的 CSS ---
+# 這段 CSS 會偵測瀏覽器設定，強制將 Markdown 區塊 (.prose) 的文字顏色反轉
+adaptive_css = """
+@media (prefers-color-scheme: dark) {
+    /* 深色模式：文字變淺灰/白 */
+    .prose, .prose > p, .prose > ul > li, .prose > ol > li, .prose span {
+        color: #e2e8f0 !important; 
+    }
+    /* 標題變全白 */
+    .prose h1, .prose h2, .prose h3, .prose h4 {
+        color: #f8fafc !important;
+    }
+    /* 粗體字變亮 */
+    .prose strong {
+        color: #fbbf24 !important; /* 稍微帶一點金黃色讓重點突出，或改 #ffffff */
+    }
+    /* 表格文字 */
+    .prose table, .prose th, .prose td {
+        color: #e2e8f0 !important;
+        border-color: #475569 !important;
+    }
+    /* Label 標籤文字 (如 "AI 回應", "心情日記") */
+    span.svelte-1gfkn6j, label.svelte-1gfkn6j, .block-label {
+        color: #e2e8f0 !important;
+    }
+    /* 除錯 Markdown 區塊 */
+    .markdown-body {
+        color: #e2e8f0 !important;
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    /* 淺色模式：確保文字是深色 (防止預設主題干擾) */
+    .prose, .prose > p, .prose > ul > li, .prose > ol > li {
+        color: #1f2937 !important;
+    }
+    .prose h1, .prose h2, .prose h3 {
+        color: #111827 !important;
+    }
+}
+"""
+
+# 將原本的 emotion.css 與新的適應性 CSS 合併
+combined_css = emotion.css + adaptive_css
 
 with gr.Blocks(title="AI 心情食堂", css=combined_css) as demo: