Fix text and icon visibility with proper contrast

app.py

@@ -189,8 +189,8 @@ custom_css = """
         --bg-secondary: #2d2d2d;
         --bg-accent: #1e3a8a;
         --bg-warning: #4d3800;
-        --text-primary: #f8f9fa;
-        --text-secondary: #adb5bd;
+        --text-primary: #ffffff;
+        --text-secondary: #e9ecef;
         --text-accent: #90caf9;
         --text-warning: #ffd60a;
         --border-color: #495057;
@@ -200,6 +200,12 @@ custom_css = """
     }
 }
 
+/* Force text colors for all elements */
+.gradio-container,
+.gradio-container * {
+    color: var(--text-primary) !important;
+}
+
 /* Medical disclaimer styling */
 .medical-disclaimer {
     background-color: var(--bg-warning);
@@ -207,20 +213,16 @@ custom_css = """
     border-radius: 12px;
     padding: 20px;
     margin: 15px 0;
-    color: var(--text-warning);
     box-shadow: 0 4px 6px var(--shadow);
     transition: all 0.3s ease;
 }
 
-.medical-disclaimer h3 {
-    color: var(--text-warning);
+.medical-disclaimer h3,
+.medical-disclaimer p,
+.medical-disclaimer strong {
+    color: var(--text-warning) !important;
     margin-top: 0;
     font-weight: 600;
-}
-
-.medical-disclaimer p {
-    color: var(--text-warning);
-    margin-bottom: 0;
     line-height: 1.5;
 }
 
@@ -242,19 +244,18 @@ custom_css = """
     border-radius: 12px;
     padding: 20px;
     margin: 15px 0;
-    color: var(--text-accent);
     box-shadow: 0 4px 6px var(--shadow);
     transition: all 0.3s ease;
 }
 
-.info-box h3, .info-box h4 {
-    color: var(--text-accent);
+.info-box h3, 
+.info-box h4,
+.info-box p, 
+.info-box li,
+.info-box strong {
+    color: var(--text-accent) !important;
     margin-top: 0;
     font-weight: 600;
-}
-
-.info-box p, .info-box li {
-    color: var(--text-accent);
     line-height: 1.5;
 }
 
@@ -270,19 +271,20 @@ custom_css = """
 }
 
 .about-section h3 {
-    color: var(--text-primary);
+    color: var(--text-primary) !important;
     margin-top: 0;
     font-weight: 600;
 }
 
-.about-section p {
-    color: var(--text-secondary);
+.about-section p,
+.about-section strong {
+    color: var(--text-secondary) !important;
     line-height: 1.6;
     margin-bottom: 10px;
 }
 
 .about-section a {
-    color: var(--text-accent);
+    color: var(--text-accent) !important;
     text-decoration: none;
     font-weight: 500;
 }
@@ -299,7 +301,7 @@ custom_css = """
 }
 
 .main-title h1 {
-    color: var(--text-primary);
+    color: var(--text-primary) !important;
     font-size: 2.5rem;
     font-weight: 700;
     margin-bottom: 10px;
@@ -307,14 +309,14 @@ custom_css = """
 }
 
 .main-title p {
-    color: var(--text-secondary);
+    color: var(--text-secondary) !important;
     font-size: 1.2rem;
     font-weight: 400;
 }
 
 /* Section headers */
 .section-header {
-    color: var(--text-primary);
+    color: var(--text-primary) !important;
     font-size: 1.4rem;
     font-weight: 600;
     margin-bottom: 15px;
@@ -334,6 +336,7 @@ custom_css = """
     border-radius: 8px;
     border: 1px solid var(--border-color);
     transition: all 0.3s ease;
+    color: var(--text-secondary) !important;
 }
 
 .condition-item:hover {
@@ -342,18 +345,14 @@ custom_css = """
 }
 
 .condition-item strong {
-    color: var(--text-primary);
+    color: var(--text-primary) !important;
 }
 
-.condition-item {
-    color: var(--text-secondary);
-}
-
-/* Button and input styling improvements */
+/* Gradio component overrides for proper theming */
 .gradio-container .gr-button {
-    background-color: var(--bg-accent);
-    color: var(--text-accent);
-    border: 2px solid var(--border-accent);
+    background-color: var(--bg-accent) !important;
+    color: var(--text-accent) !important;
+    border: 2px solid var(--border-accent) !important;
     border-radius: 8px;
     font-weight: 500;
     transition: all 0.3s ease;
@@ -366,32 +365,98 @@ custom_css = """
 
 /* Upload area styling */
 .gradio-container .gr-file-upload {
-    border: 2px dashed var(--border-accent);
+    border: 2px dashed var(--border-accent) !important;
     border-radius: 12px;
-    background-color: var(--bg-secondary);
+    background-color: var(--bg-secondary) !important;
     transition: all 0.3s ease;
+    color: var(--text-primary) !important;
 }
 
 .gradio-container .gr-file-upload:hover {
-    border-color: var(--text-accent);
-    background-color: var(--bg-accent);
+    border-color: var(--text-accent) !important;
+    background-color: var(--bg-accent) !important;
 }
 
 /* Results area styling */
 .gradio-container .gr-label {
-    background-color: var(--bg-secondary);
-    border: 1px solid var(--border-color);
+    background-color: var(--bg-secondary) !important;
+    border: 1px solid var(--border-color) !important;
     border-radius: 8px;
-    color: var(--text-primary);
+    color: var(--text-primary) !important;
 }
 
-/* Ensure all text is visible */
-* {
-    color: var(--text-primary);
+/* Image upload component */
+.gradio-container .gr-image {
+    background-color: var(--bg-secondary) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: 8px;
+}
+
+/* Input labels and text */
+.gradio-container label,
+.gradio-container .gr-label-text,
+.gradio-container .gr-input-label {
+    color: var(--text-primary) !important;
+    font-weight: 500;
+}
+
+/* Markdown content */
+.gradio-container .gr-markdown,
+.gradio-container .gr-markdown * {
+    color: var(--text-primary) !important;
+}
+
+.gradio-container .gr-markdown strong {
+    color: var(--text-primary) !important;
+    font-weight: 600;
+}
+
+/* Icons and SVG elements */
+.gradio-container svg,
+.gradio-container .gr-icon {
+    fill: var(--text-primary) !important;
+    color: var(--text-primary) !important;
+}
+
+/* Placeholder text */
+.gradio-container ::placeholder {
+    color: var(--text-secondary) !important;
+    opacity: 0.7;
+}
+
+/* Ensure high contrast for readability */
+@media (prefers-color-scheme: dark) {
+    .gradio-container,
+    .gradio-container *:not(.medical-disclaimer *):not(.info-box *):not(.about-section *) {
+        color: #ffffff !important;
+    }
+    
+    .gradio-container svg,
+    .gradio-container .gr-icon {
+        fill: #ffffff !important;
+        stroke: #ffffff !important;
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    .gradio-container,
+    .gradio-container *:not(.medical-disclaimer *):not(.info-box *):not(.about-section *) {
+        color: #212529 !important;
+    }
+    
+    .gradio-container svg,
+    .gradio-container .gr-icon {
+        fill: #212529 !important;
+        stroke: #212529 !important;
+    }
 }
 
-p, span, div {
-    color: inherit;
+/* Force visibility for all text elements */
+.gradio-container h1, .gradio-container h2, .gradio-container h3, 
+.gradio-container h4, .gradio-container h5, .gradio-container h6,
+.gradio-container p, .gradio-container span, .gradio-container div,
+.gradio-container label, .gradio-container button {
+    color: var(--text-primary) !important;
 }
 """
 
@@ -410,7 +475,7 @@ with gr.Blocks(
     
     gr.HTML("""
     <div class="main-title">
-        <h1>🏥 DermaAI - Skin Disease Classification</h1>
+        <h1 style="color: var(--text-primary);">🏥 DermaAI - Skin Disease Classification</h1>
         <p>AI-powered skin condition analysis using deep learning</p>
     </div>
     """)