Update app.py

app.py

@@ -8,7 +8,7 @@ from urllib.parse import urlparse
 # Hardcoded API endpoint - Updated to correct endpoint
 API_ENDPOINT = "https://jaybene1-testapicontacts.hf.space/contacts"
 
-# Professional color scheme inspired by sale leaseback theme
+# Professional color scheme inspired by sale leaseback theme - Fixed theme configuration
 theme = gr.themes.Soft(
     primary_hue="blue",
     secondary_hue="slate",
@@ -17,10 +17,15 @@ theme = gr.themes.Soft(
     spacing_size="md",
     radius_size="md"
 ).set(
+    # Background colors
     body_background_fill="#1a1a1a",
     body_background_fill_dark="#1a1a1a",
+    
+    # Text colors
     body_text_color="#e5e5e5",
     body_text_color_dark="#e5e5e5",
+    
+    # Block colors
     block_background_fill="#2d2d2d",
     block_background_fill_dark="#2d2d2d",
     block_border_color="#404040",
@@ -29,14 +34,16 @@ theme = gr.themes.Soft(
     block_label_text_color_dark="#e5e5e5",
     block_title_text_color="#e5e5e5",
     block_title_text_color_dark="#e5e5e5",
+    
+    # Input colors (using valid property names)
     input_background_fill="#2d2d2d",
     input_background_fill_dark="#2d2d2d",
     input_border_color="#555555",
     input_border_color_dark="#555555",
-    input_text_color="#e5e5e5",
-    input_text_color_dark="#e5e5e5",
     input_placeholder_color="#a0a0a0",
     input_placeholder_color_dark="#a0a0a0",
+    
+    # Button colors
     button_primary_background_fill="#1e40af",
     button_primary_background_fill_hover="#2563eb",
     button_primary_text_color="#ffffff",
@@ -363,10 +370,30 @@ def create_sample_data():
 
 # Create the Gradio interface
 with gr.Blocks(theme=theme, title="Kwekel Companies Contact Search Tool", css="""
+    /* Root and body styles */
+    :root {
+        --body-text-color: #e5e5e5 !important;
+        --neutral-50: #1a1a1a !important;
+        --neutral-100: #2d2d2d !important;
+        --neutral-200: #404040 !important;
+        --neutral-300: #555555 !important;
+        --neutral-400: #6b7280 !important;
+        --neutral-500: #9ca3af !important;
+        --neutral-600: #d1d5db !important;
+        --neutral-700: #e5e7eb !important;
+        --neutral-800: #f3f4f6 !important;
+        --neutral-900: #ffffff !important;
+        --neutral-950: #ffffff !important;
+    }
+    
     .gradio-container {
         max-width: 1200px !important;
         margin: 0 auto !important;
+        background-color: #1a1a1a !important;
+        color: #e5e5e5 !important;
     }
+    
+    /* Header styles */
     .header {
         background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
         color: white;
@@ -381,9 +408,11 @@ with gr.Blocks(theme=theme, title="Kwekel Companies Contact Search Tool", css=""
         font-size: 2.5rem;
         font-weight: 700;
         margin-bottom: 0.5rem;
-        color: #ffffff;
+        color: #ffffff !important;
         text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
     }
+    
+    /* Info box styles */
     .info-box {
         background: #2d2d2d;
         border: 1px solid #1e40af;
@@ -393,51 +422,108 @@ with gr.Blocks(theme=theme, title="Kwekel Companies Contact Search Tool", css=""
         color: #ffffff;
     }
     .info-box h3 {
-        color: #ffffff;
+        color: #ffffff !important;
         margin-top: 0;
     }
     .info-box p, .info-box ol, .info-box li {
-        color: #e5e5e5;
+        color: #e5e5e5 !important;
     }
+    
+    /* Footer styles */
     .footer {
         text-align: center;
         margin-top: 2rem;
         padding-top: 2rem;
         border-top: 1px solid #404040;
-        color: #cccccc;
+        color: #cccccc !important;
     }
-    body {
-        background-color: #1a1a1a !important;
+    
+    /* Global text color overrides */
+    body, .gradio-container, .gradio-container * {
         color: #e5e5e5 !important;
     }
-    .dark {
-        background-color: #1a1a1a !important;
+    
+    /* Input field styles */
+    .gr-textbox input, 
+    .gr-textbox textarea,
+    input[type="text"], 
+    input[type="email"], 
+    input[type="url"], 
+    textarea {
         color: #e5e5e5 !important;
+        background-color: #2d2d2d !important;
+        border: 1px solid #555555 !important;
+    }
+    
+    /* Input placeholder styles */
+    .gr-textbox input::placeholder,
+    .gr-textbox textarea::placeholder,
+    input::placeholder,
+    textarea::placeholder {
+        color: #a0a0a0 !important;
     }
-    /* Ensure all text is light colored */
-    .gradio-container * {
+    
+    /* Label styles */
+    label, .gr-label {
         color: #e5e5e5 !important;
     }
-    /* Override specific elements that need light text */
-    .gr-textbox input, .gr-textbox textarea {
+    
+    /* Markdown and code styles */
+    .gr-markdown, .gr-markdown * {
+        color: #e5e5e5 !important;
+    }
+    
+    .gr-code, .gr-code * {
         color: #e5e5e5 !important;
         background-color: #2d2d2d !important;
     }
-    .gr-markdown {
+    
+    /* Form and block styles */
+    .gr-form, .gr-form * {
         color: #e5e5e5 !important;
     }
-    .gr-code {
+    
+    .gr-block, .gr-block * {
         color: #e5e5e5 !important;
+    }
+    
+    /* Panel and container styles */
+    .gr-panel {
         background-color: #2d2d2d !important;
+        border: 1px solid #404040 !important;
+    }
+    
+    .gr-container {
+        background-color: #1a1a1a !important;
+    }
+    
+    /* Button text visibility */
+    .gr-button {
+        color: #ffffff !important;
+    }
+    
+    /* Ensure info text is visible */
+    .gr-info {
+        color: #a0a0a0 !important;
     }
-    label {
+    
+    /* Additional specific overrides */
+    .gr-textbox-label,
+    .gr-markdown-label,
+    .gr-code-label {
         color: #e5e5e5 !important;
     }
-    .gr-form {
+    
+    /* Override any remaining dark text */
+    p, span, div, h1, h2, h3, h4, h5, h6, li, td, th {
         color: #e5e5e5 !important;
     }
-    .gr-block {
+    
+    /* Ensure all text inputs have proper contrast */
+    input:focus, textarea:focus {
         color: #e5e5e5 !important;
+        background-color: #2d2d2d !important;
+        border-color: #1e40af !important;
     }
 """) as demo: