Fix: Force dark theme and move voice toggle to main view

app.py

@@ -486,10 +486,10 @@ def set_pip_mode(mode: str, session_id: str = "mcp_default") -> str:
 
 # Custom CSS for styling
 CUSTOM_CSS = """
-/* Main layout */
-body {
-    background-color: #f0f2f5;
-    color: #1a1a2e;
+/* Force Dark Theme Defaults */
+body, .gradio-container {
+    background-color: #1a1a2e !important;
+    color: #e0e0e0 !important;
 }
 
 /* Pip avatar container */
@@ -499,37 +499,42 @@ body {
     align-items: center;
     min-height: 200px;
     max-height: 250px;
-    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+    background: linear-gradient(135deg, #1e2a4a 0%, #16213e 100%);
     border-radius: 20px;
-    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
+    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
     margin-bottom: 12px;
     transition: transform 0.3s ease;
     padding: 16px;
+    border: 1px solid rgba(255,255,255,0.05);
 }
 
 .pip-container:hover {
     transform: translateY(-2px);
+    box-shadow: 0 6px 24px rgba(108, 92, 231, 0.15);
 }
 
 .pip-container svg {
     max-width: 180px;
     max-height: 180px;
+    filter: drop-shadow(0 0 10px rgba(108, 92, 231, 0.3));
 }
 
 /* Chat container */
 .chatbot-container {
     border-radius: 20px !important;
-    box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
-    border: 1px solid rgba(0,0,0,0.08) !important;
-    background: #fafafa !important;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
+    border: 1px solid rgba(255,255,255,0.08) !important;
+    background: #16213e !important;
 }
 
 /* Mood image */
 .mood-image {
     border-radius: 16px !important;
-    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
     overflow: hidden;
     transition: transform 0.3s ease;
+    border: 1px solid rgba(255,255,255,0.05);
+    background-color: #16213e;
 }
 
 .mood-image:hover {
@@ -540,11 +545,11 @@ body {
 .image-explanation {
     text-align: center;
     font-style: italic;
-    color: #555;
+    color: #b0b0b0;
     font-size: 0.9em;
     padding: 10px 14px;
     margin-top: 8px;
-    background: linear-gradient(135deg, rgba(108, 92, 231, 0.06) 0%, rgba(168, 230, 207, 0.06) 100%);
+    background: linear-gradient(135deg, rgba(108, 92, 231, 0.12) 0%, rgba(168, 230, 207, 0.12) 100%);
     border-radius: 10px;
     border-left: 3px solid #6c5ce7;
 }
@@ -552,38 +557,21 @@ body {
 /* Status bar */
 .status-bar {
     font-size: 0.85em;
-    color: #555;
+    color: #b0b0b0;
     padding: 10px 14px;
-    background: white;
-    border-radius: 12px;
-    border: 1px solid #e8e8e8;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
-}
-
-/* Dark theme */
-.dark body {
-    background-color: #1a1a2e;
-}
-
-.dark .pip-container {
-    background: linear-gradient(135deg, #1e2a4a 0%, #16213e 100%);
-    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
-}
-
-.dark .status-bar {
     background: #1e2a4a;
-    color: #b0b0b0;
-    border-color: #2d3a5a;
-}
-
-.dark .chatbot-container {
-    background: #1e2a4a !important;
-    border-color: #2d3a5a !important;
+    border-radius: 12px;
+    border: 1px solid #2d3a5a;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
 }
 
-.dark .image-explanation {
-    color: #b0b0b0;
-    background: linear-gradient(135deg, rgba(108, 92, 231, 0.12) 0%, rgba(168, 230, 207, 0.12) 100%);
+/* Voice Toggle */
+.voice-toggle {
+    background: rgba(108, 92, 231, 0.1);
+    padding: 8px 12px;
+    border-radius: 10px;
+    border: 1px solid rgba(108, 92, 231, 0.2);
+    margin-bottom: 10px;
 }
 
 /* Header */
@@ -596,11 +584,12 @@ body {
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
+    text-shadow: 0 0 30px rgba(108, 92, 231, 0.3);
 }
 
 .header-subtitle {
     text-align: center;
-    color: #666;
+    color: #888;
     font-size: 1.1em;
     margin-top: 0;
     margin-bottom: 20px;
@@ -621,24 +610,37 @@ button.primary:hover {
     box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3) !important;
 }
 
-/* Action buttons row */
-.action-buttons button {
-    min-height: 42px;
+/* Footer */
+.footer {
+    text-align: center;
+    margin-top: 40px;
+    color: #555;
+    font-size: 0.8em;
 }
+"""
 
-/* Make messages area more visible in dark mode */
-.dark .message {
-    background: #252d48 !important;
+# JS to force dark mode
+JS_DARK_MODE = """
+function refresh() {
+    document.body.classList.add('dark');
+    const url = new URL(window.location);
+    if (url.searchParams.get('__theme') !== 'dark') {
+        url.searchParams.set('__theme', 'dark');
+        window.history.pushState({}, '', url);
+    }
 }
 """
 
 # Build the Gradio app
-demo = gr.Blocks(title="Pip - Emotional AI Companion")
-demo.theme = gr.themes.Soft(
-    primary_hue="indigo",
-    secondary_hue="teal",
-    radius_size="lg",
-    font=["Nunito", "sans-serif"]
+demo = gr.Blocks(
+    title="Pip - Emotional AI Companion",
+    theme=gr.themes.Soft(
+        primary_hue="indigo",
+        secondary_hue="teal",
+        radius_size="lg",
+        font=["Nunito", "sans-serif"]
+    ),
+    js=JS_DARK_MODE
 )
 
 with demo:
@@ -676,6 +678,14 @@ with demo:
                         show_label=True
                     )
                     
+                    # Voice Toggle (Visible now!)
+                    voice_toggle = gr.Checkbox(
+                        value=False,
+                        label="🗣️ Enable Voice Response",
+                        info="Pip will speak back to you",
+                        elem_classes=["voice-toggle"]
+                    )
+                    
                     # Mood Image (moved up - more prominent)
                     mood_image = gr.Image(
                         label="Pip's Visualization",
@@ -698,19 +708,13 @@ with demo:
                     )
                     
                     # Controls Group (moved below image)
-                    with gr.Accordion("⚙️ Settings", open=False):
+                    with gr.Accordion("⚙️ Advanced Settings", open=False):
                         mode_selector = gr.Radio(
                             ["Auto", "Alchemist", "Artist", "Dream", "Night"],
                             value="Auto",
                             label="Interaction Mode",
                             info="How should Pip visualize your feelings?"
                         )
-                        
-                        voice_toggle = gr.Checkbox(
-                            value=False,
-                            label="Enable Voice Response",
-                            info="Pip will speak the response"
-                        )
                     
                     # Audio Output
                     audio_output = gr.Audio(