fix dark mode

app.py

@@ -361,13 +361,17 @@ def process_image(image, selected_checkpoint_path):
         results_html = f"""
         <style>
             :root {{
+                /* Your custom accent colors are fine */
                 --primary-color: #4f46e5;
                 --success-color: #10b981;
-                --text-primary: #ffffff;
-                --text-secondary: #9ca3af;
-                --background-dark: #1f2937;
-                --background-darker: #111827;
-                --border-color: #374151;
+
+                /* --- FIX: Use Gradio's theme variables --- */
+                /* This makes your component light/dark mode aware */
+                --text-primary: var(--body-text-color);
+                --text-secondary: var(--body-text-color-subdued);
+                --background-dark: var(--background-fill-primary);
+                --background-darker: var(--background-fill-secondary);
+                --border-color: var(--border-color-primary);
             }}
             .results-container {{
                 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
@@ -627,7 +631,8 @@ def create_interface(checkpoint_list, default_checkpoint, initial_status):
     """
 
     # Create interface
-    with gr.Blocks(css=custom_css, title="Face Classification System") as demo:
+    # --- FIX: Added theme=gr.themes.Default() to enable light/dark mode switching ---
+    with gr.Blocks(css=custom_css, title="Face Classification System", theme=gr.themes.Default()) as demo:
 
         with gr.Row():
             gr.Markdown("# Face Classification System")