Update app.py

app.py

@@ -180,27 +180,34 @@ def bridge_predict_frame(frame, st):
 # 4. Gradio 介面建構
 # ==========================================
 
-# 定義強制標題黑色的 CSS
-force_black_title_css = """
-/* 1. 強制 Tab 分頁按鈕的文字 (如 "😊 情緒辨識 (Step 1)") 為黑色 */
+# 定義強制黑色文字的 CSS (包含標題與 Tab)
+force_black_css = """
+/* 1. 強制 Tab 分頁按鈕文字為黑色 */
 .tab-nav button {
     color: #000000 !important;
+    text-shadow: none !important; /* 移除可能存在的陰影讓黑色更實 */
 }
+
+/* 2. 強制 Tab 被選中時的文字也為黑色 */
 .tab-nav button.selected {
-    color: #000000 !important; 
-    /* 如果選取時背景也是深色導致看不清，可以順便強制背景偏白：
-       background-color: #f1f5f9 !important; 
-    */
+    color: #000000 !important;
+    font-weight: bold !important; /* 選中時加粗 */
+}
+
+/* 3. (選用) 為了怕深色模式下背景太深導致黑色字看不到，
+      可以強制 Tab 背景色為淺色 (若原本顯示沒問題可拿掉這行) */
+.tab-nav {
+    background-color: #f8fafc !important; 
 }
 
-/* 2. 強制內容中的標題 (如 "## 第一步：測測你的心情能量") 為黑色 */
+/* 4. 同時確保內容的大標題也是黑色 (承接上一個需求) */
 h1, h2, h3, h4, h5, h6, .prose h1, .prose h2, .prose h3 {
     color: #000000 !important;
 }
 """
 
-# 將原本的 emotion.css 與這段強制黑色的 CSS 合併
-combined_css = emotion.css + force_black_title_css
+# 合併原本的 CSS 與 新的強制黑色 CSS
+combined_css = emotion.css + force_black_css
 
 with gr.Blocks(title="AI 心情食堂", css=combined_css) as demo: