fix dark UI

app.py

@@ -27,56 +27,52 @@ def get_turso_conn():
 COLLECTION_NAME = "books_collection"
 VECTOR_SIZE = 256
 
+# --- JAVASCRIPT PER FORZARE DARK MODE ---
+JS_FORCE_DARK = """
+function() {
+    document.body.classList.add('dark');
+}
+"""
+
 # --- CSS GLOBALE ---
 GLOBAL_CSS = """
+/* Sfondo pagina e testo */
+body, .gradio-container {
+    background-color: #0b0f19 !important;
+    color: #e5e7eb !important;
+}
+
 /* Animazione Spinner */
 .loader {
-  border: 6px solid #f3f3f3;
+  border: 6px solid #374151;
   border-radius: 50%;
-  border-top: 6px solid #3498db;
-  border-bottom: 6px solid #e74c3c;
+  border-top: 6px solid #3b82f6;
+  border-bottom: 6px solid #ef4444;
   width: 40px;
   height: 40px;
   -webkit-animation: spin 1s linear infinite;
   animation: spin 1s linear infinite;
   margin: 0 auto;
 }
+@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
 
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
+/* Bottoni Dataset */
 #book_cards button {
-    background-color: #f0f2f5 !important;
-    color: #1f2937 !important;
-    border: 1px solid #d1d5db !important;
-    text-align: left;
-    padding: 10px !important;
+    background-color: #1f2937 !important;
+    color: #e5e7eb !important;
+    border: 1px solid #374151 !important;
 }
 #book_cards button:hover {
-    background-color: #e5e7eb !important;
-    border-color: #3b82f6 !important;
-}
-#book_cards .text-sm {
-    color: #4b5563 !important;
+    background-color: #374151 !important;
+    border-color: #60a5fa !important;
 }
+#book_cards .text-sm { color: #9ca3af !important; }
 
-.card-force-dark {
-    color: #000000 !important;
-}
-.card-force-dark h3 {
-    color: #1f2937 !important; 
-    margin-top: 0 !important;
-}
-.card-force-dark p,
-.card-force-dark b,
-.card-force-dark span,
-.card-force-dark div {
-    color: #000000 !important; 
-.card-force-dark summary {
-    color: #007bff !important; 
-}
+/* Stile Card Risultati */
+.card-force-dark { color: #e5e7eb !important; }
+.card-force-dark h3 { color: #60a5fa !important; margin-top: 0 !important; }
+.card-force-dark p, .card-force-dark b, .card-force-dark span { color: #d1d5db !important; }
+.card-force-dark summary { color: #fbbf24 !important; }
 """
 
 # HTML dello spinner
@@ -118,13 +114,13 @@ def render_results_from_ids(ids, scores):
         autore_clean = str(row[2]).replace('"', '').replace("[","").replace("]", "")
 
         html_output += f"""
-        <div class="card-force-dark" style="border: 1px solid #ddd; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); background-color: #ffffff;">
+        <div class="card-force-dark" style="border: 1px solid #374151; padding: 15px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); background-color: #1f2937;">
             <h3>{row[1]}</h3>
 
             <p style="font-size: 0.9em; margin-bottom: 5px;">
                 <b>✍️ {autore_clean}</b> | 📅 {row[3]} | ⭐ {row[4]}
             </p>
-
+            
             <p style="margin-top: 0;">
                 <b>🎯 Similarità:</b> {score:.3f}
             </p>
@@ -230,7 +226,7 @@ def on_card_click_animated(selected_index, books_state_list, max_results):
 
 
 # --- INTERFACCIA ---
-with gr.Blocks(theme=gr.themes.Ocean(), css=GLOBAL_CSS) as demo:
+with gr.Blocks(theme=gr.themes.Ocean(), css=GLOBAL_CSS, js=JS_FORCE_DARK) as demo:
     gr.Markdown("# 📚 AI Book Finder")
 
     books_state = gr.State([])