Update app.py

app.py

@@ -731,15 +731,38 @@ def gradio_interface(user_input):
 # --- UI 介面定義 ---
 # 1. 定義自訂 CSS 樣式
 custom_css = """
-/* 針對我們指定的 Markdown 區塊進行樣式設定 */
+/* --- 基本樣式 (淺色與夜間模式共用) --- */
 #output_markdown {
-    padding: 15px;         /* 增加一些內部邊距，讓文字不會貼著邊框 */
-    border-radius: 8px;    /* 圓角效果 */
-    background: #ffffff !important;   /* 設定一個淡淡的背景色，與 Group 區別開 */
-    min-height: 120px; 
-    max-height: 400px;     /* 設定最大高度，例如 400px */
-    overflow-y: auto;      /* 當內容超出最大高度時，顯示垂直滾動條 */
-    box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.05); /* 增加一點內陰影，更有層次感 */
+    padding: 15px;
+    border-radius: 8px;
+    min-height: 100px;
+    max-height: 380px;
+    overflow-y: auto;
+    box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.05);
+    
+    /* --- 預設為淺色模式的樣式 --- */
+    background: #ffffff !important; /* 淺色模式下的背景 */
+    color: #374151;              /* 淺色模式下的文字顏色 (深灰色) */
+}
+
+/* --- 夜間模式下的覆蓋樣式 --- */
+/* 當系統或瀏覽器處於夜間模式時，以下規則會生效 */
+@media (prefers-color-scheme: dark) {
+    #output_markdown {
+        background: #1f2937 !important; /* 夜間模式下的背景 (深藍灰色) */
+        color: #d1d5db !important;      /* 夜間模式下的文字顏色 (淺灰色) */
+    }
+#output_markdown2 {
+    padding: 15px;
+    border-radius: 8px;
+    min-height: 120px;
+    max-height: 400px;
+    overflow-y: auto;
+    box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.05);
+    background: #ffffff !important;
+    color: #374151;
+}
+
 }
 """
 
@@ -790,7 +813,11 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", secondary_hue="orange"),
             )
             
             with gr.Group():
-                gr.Markdown("### 🧐 查詢結果")
+                gr.Markdown(""""### 🧐 查詢結果   <br>
+                
+                            """,
+                            elem_id="output_markdown2" 
+                           )
                 output_result = gr.Markdown(
                     # label="🧐 查詢結果",
                     # show_label=True,