Update app.py

app.py

@@ -180,34 +180,42 @@ def bridge_predict_frame(frame, st):
 # 4. Gradio 介面建構
 # ==========================================
 
-# 定義強制黑色文字的 CSS (包含標題與 Tab)
-force_black_css = """
-/* 1. 強制 Tab 分頁按鈕文字為黑色 */
-.tab-nav button {
+# 定義強制黑色文字的 CSS (修正白字白底問題)
+force_text_visible_css = """
+/* 1. 【關鍵】強制 Markdown 內文、段落、清單文字為深黑色 */
+.prose, .prose > p, .prose > div, .prose > span, .prose > ul > li {
+    color: #1f2937 !important; /* 深灰黑，確保在淺底上清楚 */
+}
+
+/* 2. 強制所有標題 (H1~H6) 為純黑 */
+h1, h2, h3, h4, h5, h6, .prose h1, .prose h2, .prose h3 {
     color: #000000 !important;
-    text-shadow: none !important; /* 移除可能存在的陰影讓黑色更實 */
 }
 
-/* 2. 強制 Tab 被選中時的文字也為黑色 */
+/* 3. 【Tab 修復】強制 Tab 分頁按鈕文字為黑色 */
+.tab-nav button {
+    color: #000000 !important;
+    text-shadow: none !important; 
+}
 .tab-nav button.selected {
     color: #000000 !important;
-    font-weight: bold !important; /* 選中時加粗 */
+    font-weight: bold !important;
+    /* 確保選取時的邊框或標示清楚 */
 }
 
-/* 3. (選用) 為了怕深色模式下背景太深導致黑色字看不到，
-      可以強制 Tab 背景色為淺色 (若原本顯示沒問題可拿掉這行) */
-.tab-nav {
-    background-color: #f8fafc !important; 
+/* 4. 確保 Tab 內的圖示 (Icon) 也是黑色 */
+.tab-nav button span {
+    color: #000000 !important;
 }
 
-/* 4. 同時確保內容的大標題也是黑色 (承接上一個需求) */
-h1, h2, h3, h4, h5, h6, .prose h1, .prose h2, .prose h3 {
-    color: #000000 !important;
+/* 5. 確保輸入框內的標籤 (Label) 是深色 */
+label, span.block-label {
+    color: #374151 !important;
 }
 """
 
-# 合併原本的 CSS 與 新的強制黑色 CSS
-combined_css = emotion.css + force_black_css
+# 合併 emotion.css 與 修正後的 CSS
+combined_css = emotion.css + force_text_visible_css
 
 with gr.Blocks(title="AI 心情食堂", css=combined_css) as demo: