🌙 统一采用暗色主题设计 - GitHub风格

🎨 完整暗色主题设计:
1. **全局色彩系统**
- 主背景: #0d1117 (GitHub深色)
- 表面色: #161b22 (卡片背景)
- 次级表面: #21262d (输入框等)
- 边框色: #30363d / #21262d
- 主色调: #0969da (GitHub蓝)
- 文本色: #f0f6fc (主要) / #8b949e (次要)

2. **组件样式统一**
- 所有输入框、下拉框、音频组件使用暗色背景
- 统一12px圆角设计
- hover效果带有蓝色边框和阴影
- 按钮采用主品牌色配色方案

3. **Gradio主题定制**
- 使用 gr.themes.Base 创建自定义暗色主题
- 覆盖默认配色为GitHub暗色风格
- 自定义CSS进一步精细化样式控制

4. **视觉层次优化**
- 卡片hover效果: 上移 + 蓝色边框 + 增强阴影
- 按钮渐变hover效果: 颜色变化 + 位移 + 阴影
- 折叠面板、文本、代码块统一暗色处理

5. **护眼体验**
- 深色背景减少眼部疲劳
- 合适的对比度确保文字清晰可读
- 现代化的视觉感受

🔧 技术实现:
- CSS变量系统便于主题维护
- Gradio原生主题 + 自定义CSS双重保障
- 全面覆盖所有UI组件的样式重置

现在整个界面呈现统一的现代暗色风格，视觉体验更加一致和舒适！

app.py

@@ -402,20 +402,26 @@ def generate_dialogue_audio(
 # =========================
 
 def create_space_ui() -> gr.Blocks:
-    # Apple-inspired 简洁设计样式
+    # Apple-inspired 暗色主题设计
     custom_css = """
-    /* 全局样式 - Apple风格 */
+    /* 全局样式 - Apple暗色风格 */
     .gradio-container {
         max-width: 1400px !important;
         margin: 0 auto !important;
         font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif !important;
-        background: #f5f5f7 !important;
-        --primary-color: #007AFF;
-        --surface-color: #ffffff;
-        --border-color: #d1d1d6;
-        --text-primary: #1d1d1f;
-        --text-secondary: #86868b;
-        --shadow: 0 4px 16px rgba(0,0,0,0.1);
+        background: #0d1117 !important;
+        --primary-color: #0969da;
+        --primary-hover: #1f6feb;
+        --surface-color: #161b22;
+        --surface-secondary: #21262d;
+        --border-color: #30363d;
+        --border-secondary: #21262d;
+        --text-primary: #f0f6fc;
+        --text-secondary: #8b949e;
+        --text-muted: #656d76;
+        --success-color: #238636;
+        --shadow: 0 4px 16px rgba(0,0,0,0.4);
+        --shadow-elevated: 0 8px 32px rgba(0,0,0,0.6);
         --radius: 12px;
     }
     /* 主标题区域 */
@@ -442,50 +448,137 @@ def create_space_ui() -> gr.Blocks:
         color: var(--text-secondary);
         font-weight: 400;
     }
+    /* 卡片组件 - 暗色主题 */
     .section {
-        background: #f8fafc;
-        padding: 1.5rem;
-        border-radius: 15px;
-        border: 1px solid #e2e8f0;
-        margin-bottom: 1rem;
-        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+        background: var(--surface-color);
+        border-radius: var(--radius);
+        padding: 2rem;
+        border: 1px solid var(--border-color);
+        margin: 1rem 0;
+        box-shadow: var(--shadow);
+        transition: all 0.2s ease;
+    }
+    .section:hover {
+        box-shadow: var(--shadow-elevated);
+        transform: translateY(-2px);
+        border-color: var(--primary-color);
     }
+    /* 按钮样式 - 暗色主题 */
     .quick-btn {
-        background: linear-gradient(45deg, #FF6B6B, #4ECDC4) !important;
+        background: var(--primary-color) !important;
         border: none !important;
-        color: white !important;
+        color: var(--text-primary) !important;
         font-weight: 600 !important;
-        border-radius: 10px !important;
-        transition: all 0.3s ease !important;
+        border-radius: var(--radius) !important;
+        padding: 0.875rem 2rem !important;
+        transition: all 0.2s ease !important;
     }
     .quick-btn:hover {
-        transform: translateY(-2px) !important;
-        box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
+        background: var(--primary-hover) !important;
+        transform: translateY(-1px) !important;
+        box-shadow: 0 8px 24px rgba(9,105,218,0.4) !important;
     }
     .generate-btn {
-        background: linear-gradient(45deg, #667eea, #764ba2) !important;
+        background: var(--primary-color) !important;
         border: none !important;
-        color: white !important;
+        color: var(--text-primary) !important;
         font-weight: 700 !important;
         font-size: 1.1rem !important;
-        border-radius: 15px !important;
+        border-radius: var(--radius) !important;
         padding: 1rem 2rem !important;
         width: 100% !important;
-        transition: all 0.3s ease !important;
+        transition: all 0.2s ease !important;
+        box-shadow: var(--shadow) !important;
     }
     .generate-btn:hover {
-        transform: translateY(-3px) !important;
-        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;
+        background: var(--primary-hover) !important;
+        transform: translateY(-2px) !important;
+        box-shadow: var(--shadow-elevated) !important;
     }
     .speaker-section {
-        background: linear-gradient(135deg, #667eea15, #764ba215);
+        background: var(--surface-secondary);
         padding: 1.5rem;
-        border-radius: 15px;
-        border: 2px solid #667eea20;
+        border-radius: var(--radius);
+        border: 1px solid var(--border-color);
+    }
+    
+    /* Gradio 组件暗色主题覆盖 */
+    .gradio-container .gr-textbox, 
+    .gradio-container .gr-textarea, 
+    .gradio-container .gr-dropdown,
+    .gradio-container .gr-audio,
+    .gradio-container .gr-slider,
+    .gradio-container .gr-checkbox,
+    .gradio-container .gr-accordion {
+        background: var(--surface-color) !important;
+        border: 1px solid var(--border-color) !important;
+        color: var(--text-primary) !important;
+        border-radius: var(--radius) !important;
+    }
+    
+    .gradio-container .gr-textbox:focus, 
+    .gradio-container .gr-textarea:focus, 
+    .gradio-container .gr-dropdown:focus {
+        border-color: var(--primary-color) !important;
+        box-shadow: 0 0 0 3px rgba(9,105,218,0.2) !important;
+    }
+    
+    /* 文本和标签暗色主题 */
+    .gradio-container .gr-markdown,
+    .gradio-container .gr-markdown *,
+    .gradio-container label,
+    .gradio-container p,
+    .gradio-container span {
+        color: var(--text-primary) !important;
+    }
+    
+    .gradio-container .gr-markdown code {
+        background: var(--surface-secondary) !important;
+        color: var(--text-primary) !important;
+        border-radius: 4px !important;
+        padding: 2px 6px !important;
+    }
+    
+    /* 按钮统一暗色主题 */
+    .gradio-container .gr-button {
+        background: var(--surface-color) !important;
+        border: 1px solid var(--border-color) !important;
+        color: var(--text-primary) !important;
+        border-radius: var(--radius) !important;
+    }
+    
+    .gradio-container .gr-button:hover {
+        background: var(--surface-secondary) !important;
+        border-color: var(--primary-color) !important;
+    }
+    
+    .gradio-container .gr-button.primary {
+        background: var(--primary-color) !important;
+        border: none !important;
+        color: var(--text-primary) !important;
+    }
+    
+    .gradio-container .gr-button.primary:hover {
+        background: var(--primary-hover) !important;
     }
     """
 
-    with gr.Blocks(css=custom_css, title="🎙️ MOSS-TTSD | Hugging Face Space", theme=gr.themes.Soft()) as demo:
+    # 创建暗色主题
+    dark_theme = gr.themes.Base(
+        primary_hue="blue",
+        secondary_hue="gray",
+        neutral_hue="gray",
+    ).set(
+        background_fill_primary="#0d1117",
+        background_fill_secondary="#161b22",
+        border_color_primary="#30363d",
+        border_color_secondary="#21262d",
+        color_accent_soft="#0969da",
+        text_color_primary="#f0f6fc",
+        text_color_secondary="#8b949e",
+    )
+    
+    with gr.Blocks(css=custom_css, title="🎙️ MOSS-TTSD | Hugging Face Space", theme=dark_theme) as demo:
         gr.HTML(
             """
             <div class="header">