enforce dark mode

app.py

@@ -139,23 +139,31 @@ def generate_explanation(movie_id, persona_name, style):
     return call_llm_with_fallback(full_prompt, movie_info, persona_name)
 
 css = """
-body { background-color: #f8fafc; }
+body { background-color: #0f172a !important; color: #f8fafc; }
 .gradio-container { max-width: 1280px !important; margin: 0 auto !important; }
-.view-container { padding: 20px; border: none; border-radius: 8px; margin-top: 20px; background: white; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
+.view-container { 
+    padding: 20px; 
+    border: none; 
+    border-radius: 8px; 
+    margin-top: 20px; 
+    background: #1e293b; 
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.5); 
+}
 
 .movie-card-container {
-    background: white; 
+    background: #1e293b; 
     border-radius: 1rem; 
     overflow: hidden; 
-    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3);
     display: flex !important;
     flex-direction: column !important;
     height: 100%;
     padding: 1rem;
     gap: 1rem;
+    border: 1px solid #334155;
 }
-.movie-card-content { display: flex; flex-direction: column; flex-grow: 1; background-color: #ffffff;}
-.poster-container { position: relative; aspect-ratio: 2/3; background: #f1f5f9; }
+.movie-card-content { display: flex; flex-direction: column; flex-grow: 1; background-color: #1e293b;}
+.poster-container { position: relative; aspect-ratio: 2/3; background: #0f172a; }
 .poster-img { width: 100%; height: 100%; object-fit: cover; }
 .movie-card-text-content {
     display: flex;
@@ -165,38 +173,36 @@ body { background-color: #f8fafc; }
 .movie-title { 
     font-weight: 700; 
     font-size: 1.125rem; 
-    color: #1e293b; 
+    color: #f8fafc; 
     flex-shrink: 0;
-    /* FIX: Set fixed height to handle multi-line titles */
     height: 2.5em; 
     line-height: 1.25em; 
     overflow: hidden;
 }
-.movie-year { font-size: 0.875rem; color: #64748b; margin-top: 2px; flex-shrink: 0; }
+.movie-year { font-size: 0.875rem; color: #94a3b8; margin-top: 2px; flex-shrink: 0; }
 .catchy-phrase { 
     font-style: italic; 
-    color: #4f46e5; 
+    color: #818cf8; 
     font-size: 1rem; 
     margin: 0.75rem 0; 
-    /* FIX: Remove flex-grow and display:flex, left-align, and set fixed height */
     text-align: left;
-    height: 2.5em; /* Approx 2 lines */
+    height: 2.5em; 
     line-height: 1.2em;
     overflow: hidden;
 }
 .genre-pills-container { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 0.5rem; flex-shrink: 0; }
-.genre-pill { background: #e2e8f0; color: #334155; padding: 4px 8px; border-radius: 9999px; font-size: 0.7rem; font-weight: 500; }
+.genre-pill { background: #334155; color: #e2e8f0; padding: 4px 8px; border-radius: 9999px; font-size: 0.7rem; font-weight: 500; }
 .synthesis-pill { 
     position: absolute; top: 12px; left: 12px; 
-    background: rgba(30, 41, 59, 0.8);
+    background: rgba(15, 23, 42, 0.8);
     color: white; padding: 4px 10px; 
     border-radius: 9999px; font-size: 12px; font-weight: 600;
     backdrop-filter: blur(4px); 
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .gradio-button {
-    background-color: #1e293b !important;
+    background-color: #3b82f6 !important;
     color: white !important;
     border: none !important;
     border-radius: 0.5rem !important;
@@ -204,23 +210,20 @@ body { background-color: #f8fafc; }
     transition: background-color 0.2s ease-in-out !important;
     padding: 10px !important;
 }
-.gradio-button:hover { background-color: #334155 !important; }
+.gradio-button:hover { background-color: #2563eb !important; }
 
 #persona_selection_view { 
     max-width: 800px; 
     margin: 40px auto !important; 
 }
 
-#persona_selection_view h2 { color: #1e293b !important; }
-
-#home_title h2 { color: #1e293b !important; }
-
-#detail_view { padding: 20px; border: none; border-radius: 8px; margin-top: 20px; background: white; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
+#persona_selection_view h2 { color: #f8fafc !important; }
+#home_title h1, #home_title h2 { color: #f8fafc !important; }
+#detail_view { padding: 20px; border: none; border-radius: 8px; margin-top: 20px; background: #1e293b; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.5); }
 #detail_poster img { max-height: 450px; }
-#home_title h1 { color: #1e293b !important; }
-#detail_title h2 { color: #1e293b !important; }
-#detail_explanation p { color: #334155 !important; }
-#detail_explanation { border: 1px solid #e2e8f0; padding: 1rem; border-radius: 0.5rem; }
+#detail_title h2 { color: #f8fafc !important; }
+#detail_explanation p { color: #e2e8f0 !important; }
+#detail_explanation { border: 1px solid #334155; padding: 1rem; border-radius: 0.5rem; background: #0f172a; }
 
 #detail_view label {
     color: white !important;
@@ -286,9 +289,10 @@ def update_home_cards_ui(persona_name, recommendations, is_live=False, time_take
 
 
 # --- UI Construction ---
-with gr.Blocks(css=css) as demo:
+with gr.Blocks(css=css, js="() => document.body.classList.add('dark')") as demo:
     selected_persona = gr.State(None)
     selected_movie_id = gr.State(None)
+
     
     gr.Markdown("# 🎬 AI-Powered Explainable Recommendations")