Update ui/ui_generators.py

ui/ui_generators.py

@@ -344,6 +344,50 @@ def build_home_tab_ui():
         .button-container {
             margin-top: 24px;
         }
+
+        /* Dark Mode Styles */
+        @media (prefers-color-scheme: dark) {
+            .overview-section {
+                background: #2d3748; /* Dark background */
+                border-color: #4a5568;
+                box-shadow: 0 10px 40px rgba(0,0,0,0.4);
+            }
+
+            .overview-header {
+                color: #f7fafc; /* Lighter text for dark background */
+            }
+
+            .overview-text {
+                color: #a0aec0; /* Lighter grey for paragraph text */
+            }
+            
+            .feature-item {
+                background: linear-gradient(135deg, #2d3748, #1a202c);
+                border-color: #4a5568;
+            }
+
+            .feature-item:hover {
+                box-shadow: 0 8px 25px rgba(0,0,0,0.5);
+            }
+
+            .feature-text {
+                color: #e2e8f0;
+            }
+            
+            .how-it-works-section {
+                background: linear-gradient(135deg, #1a202c, #2d3748);
+                border-color: #4a5568;
+            }
+
+            .how-it-works-header,
+            .step-title {
+                color: #f7fafc;
+            }
+
+            .step-description {
+                color: #a0aec0;
+            }
+        }
         
         @media (max-width: 768px) {
             .hero-title {
@@ -530,11 +574,11 @@ def build_home_tab_ui():
         with gr.Row(equal_height=True):
             with gr.Column():
                 btn_okr = gr.Button("🎯 Accedi agli OKR", variant="primary", size="lg", 
-                                      elem_classes="nav-button", scale=1)
+                                    elem_classes="nav-button", scale=1)
                 
             with gr.Column():
                 btn_help = gr.Button("📚 Documentazione", variant="secondary", size="lg", 
-                                         elem_classes="nav-button", scale=1)
+                                     elem_classes="nav-button", scale=1)
 
         # Sezione "Come funziona" con stile migliorato
         gr.HTML("""