Enhance UI with modern dark/light mode CSS

- Add comprehensive CSS variables for dynamic theming
- Implement automatic dark/light mode detection using prefers-color-scheme
- Improve text visibility and contrast in both modes
- Add modern Inter font family and smooth transitions
- Style all components (medical disclaimers, info boxes, buttons, etc.)
- Create responsive grid layout for conditions section
- Add hover effects and better visual hierarchy
- Improve accessibility and readability across all themes
- Update Gradio theme configuration for better integration

Features:
- Automatic system theme detection
- Improved contrast ratios for accessibility
- Modern card-based design with shadows
- Consistent color scheme throughout the interface
- Better mobile responsiveness

app.py

@@ -156,28 +156,242 @@ def get_medical_advice(image):
     
     return advice
 
-# Custom CSS for better styling
+# Custom CSS for better styling with dark/light mode support
 custom_css = """
+/* System theme detection and base styling */
 .gradio-container {
-    font-family: 'Arial', sans-serif;
+    font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
     max-width: 1200px;
     margin: 0 auto;
+    transition: all 0.3s ease;
 }
 
+/* Light mode (default) */
+:root {
+    --bg-primary: #ffffff;
+    --bg-secondary: #f8f9fa;
+    --bg-accent: #e3f2fd;
+    --bg-warning: #fff3cd;
+    --text-primary: #212529;
+    --text-secondary: #6c757d;
+    --text-accent: #0d47a1;
+    --text-warning: #856404;
+    --border-color: #dee2e6;
+    --border-accent: #90caf9;
+    --border-warning: #ffeaa7;
+    --shadow: rgba(0, 0, 0, 0.1);
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bg-primary: #1a1a1a;
+        --bg-secondary: #2d2d2d;
+        --bg-accent: #1e3a8a;
+        --bg-warning: #4d3800;
+        --text-primary: #f8f9fa;
+        --text-secondary: #adb5bd;
+        --text-accent: #90caf9;
+        --text-warning: #ffd60a;
+        --border-color: #495057;
+        --border-accent: #1976d2;
+        --border-warning: #b8860b;
+        --shadow: rgba(255, 255, 255, 0.1);
+    }
+}
+
+/* Medical disclaimer styling */
 .medical-disclaimer {
-    background-color: #fff3cd;
-    border: 1px solid #ffeaa7;
-    border-radius: 8px;
-    padding: 15px;
-    margin: 10px 0;
-    color: #856404;
+    background-color: var(--bg-warning);
+    border: 2px solid var(--border-warning);
+    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);
+    margin-top: 0;
+    font-weight: 600;
 }
 
+.medical-disclaimer p {
+    color: var(--text-warning);
+    margin-bottom: 0;
+    line-height: 1.5;
+}
+
+/* Prediction box styling */
 .prediction-box {
-    background-color: #f8f9fa;
-    border-radius: 8px;
+    background-color: var(--bg-secondary);
+    border-radius: 12px;
+    padding: 20px;
+    margin: 15px 0;
+    border: 1px solid var(--border-color);
+    box-shadow: 0 4px 6px var(--shadow);
+    transition: all 0.3s ease;
+}
+
+/* Info boxes */
+.info-box {
+    background-color: var(--bg-accent);
+    border: 2px solid var(--border-accent);
+    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);
+    margin-top: 0;
+    font-weight: 600;
+}
+
+.info-box p, .info-box li {
+    color: var(--text-accent);
+    line-height: 1.5;
+}
+
+/* About section */
+.about-section {
+    background-color: var(--bg-secondary);
+    border-radius: 12px;
+    padding: 25px;
+    margin-top: 30px;
+    border: 1px solid var(--border-color);
+    box-shadow: 0 4px 6px var(--shadow);
+    transition: all 0.3s ease;
+}
+
+.about-section h3 {
+    color: var(--text-primary);
+    margin-top: 0;
+    font-weight: 600;
+}
+
+.about-section p {
+    color: var(--text-secondary);
+    line-height: 1.6;
+    margin-bottom: 10px;
+}
+
+.about-section a {
+    color: var(--text-accent);
+    text-decoration: none;
+    font-weight: 500;
+}
+
+.about-section a:hover {
+    text-decoration: underline;
+}
+
+/* Main title styling */
+.main-title {
+    text-align: center;
+    margin-bottom: 20px;
+    padding: 20px;
+}
+
+.main-title h1 {
+    color: var(--text-primary);
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 10px;
+    text-shadow: 0 2px 4px var(--shadow);
+}
+
+.main-title p {
+    color: var(--text-secondary);
+    font-size: 1.2rem;
+    font-weight: 400;
+}
+
+/* Section headers */
+.section-header {
+    color: var(--text-primary);
+    font-size: 1.4rem;
+    font-weight: 600;
+    margin-bottom: 15px;
+}
+
+/* Conditions grid */
+.conditions-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 15px;
+    margin-top: 15px;
+}
+
+.condition-item {
+    background-color: var(--bg-secondary);
     padding: 15px;
-    margin: 10px 0;
+    border-radius: 8px;
+    border: 1px solid var(--border-color);
+    transition: all 0.3s ease;
+}
+
+.condition-item:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 12px var(--shadow);
+}
+
+.condition-item strong {
+    color: var(--text-primary);
+}
+
+.condition-item {
+    color: var(--text-secondary);
+}
+
+/* Button and input styling improvements */
+.gradio-container .gr-button {
+    background-color: var(--bg-accent);
+    color: var(--text-accent);
+    border: 2px solid var(--border-accent);
+    border-radius: 8px;
+    font-weight: 500;
+    transition: all 0.3s ease;
+}
+
+.gradio-container .gr-button:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px var(--shadow);
+}
+
+/* Upload area styling */
+.gradio-container .gr-file-upload {
+    border: 2px dashed var(--border-accent);
+    border-radius: 12px;
+    background-color: var(--bg-secondary);
+    transition: all 0.3s ease;
+}
+
+.gradio-container .gr-file-upload:hover {
+    border-color: var(--text-accent);
+    background-color: var(--bg-accent);
+}
+
+/* Results area styling */
+.gradio-container .gr-label {
+    background-color: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    color: var(--text-primary);
+}
+
+/* Ensure all text is visible */
+* {
+    color: var(--text-primary);
+}
+
+p, span, div {
+    color: inherit;
 }
 """
 
@@ -185,15 +399,19 @@ custom_css = """
 with gr.Blocks(
     css=custom_css,
     title="DermaAI - Skin Disease Classification",
-    theme=gr.themes.Soft()
+    theme=gr.themes.Base().set(
+        button_primary_background_fill="*primary_500",
+        button_primary_background_fill_hover="*primary_600",
+        button_primary_text_color="white",
+        block_background_fill="*background_fill_primary",
+        body_background_fill="*background_fill_primary",
+    )
 ) as demo:
     
     gr.HTML("""
-    <div style="text-align: center; margin-bottom: 20px;">
+    <div class="main-title">
         <h1>🏥 DermaAI - Skin Disease Classification</h1>
-        <p style="font-size: 18px; color: #666;">
-            AI-powered skin condition analysis using deep learning
-        </p>
+        <p>AI-powered skin condition analysis using deep learning</p>
     </div>
     """)
     
@@ -208,7 +426,7 @@ with gr.Blocks(
     
     with gr.Row():
         with gr.Column(scale=1):
-            gr.HTML("<h3>📸 Upload Skin Image</h3>")
+            gr.HTML("<h3 class='section-header'>📸 Upload Skin Image</h3>")
             input_image = gr.Image(
                 type="pil",
                 label="Upload a clear image of the skin condition",
@@ -216,7 +434,7 @@ with gr.Blocks(
             )
             
             gr.HTML("""
-            <div style="margin-top: 15px; padding: 10px; background-color: #e3f2fd; border-radius: 5px;">
+            <div class="info-box">
                 <h4>📋 Image Guidelines:</h4>
                 <ul>
                     <li>Use good lighting and focus</li>
@@ -228,7 +446,7 @@ with gr.Blocks(
             """)
         
         with gr.Column(scale=1):
-            gr.HTML("<h3>🔍 Analysis Results</h3>")
+            gr.HTML("<h3 class='section-header'>🔍 Analysis Results</h3>")
             
             prediction_output = gr.Label(
                 label="Prediction Confidence Scores",
@@ -241,14 +459,14 @@ with gr.Blocks(
             )
     
     gr.HTML("""
-    <div style="margin-top: 20px; padding: 15px; background-color: #f0f8ff; border-radius: 8px;">
+    <div class="info-box">
         <h3>🩺 Supported Skin Conditions</h3>
-        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; margin-top: 10px;">
-            <div><strong>Atopic Dermatitis:</strong> Chronic inflammatory skin condition</div>
-            <div><strong>Eczema:</strong> Red, itchy, inflamed skin patches</div>
-            <div><strong>Psoriasis:</strong> Thick, scaly skin patches</div>
-            <div><strong>Seborrheic Keratoses:</strong> Benign skin growths</div>
-            <div><strong>Tinea Ringworm Candidiasis:</strong> Fungal skin infections</div>
+        <div class="conditions-grid">
+            <div class="condition-item"><strong>Atopic Dermatitis:</strong> Chronic inflammatory skin condition</div>
+            <div class="condition-item"><strong>Eczema:</strong> Red, itchy, inflamed skin patches</div>
+            <div class="condition-item"><strong>Psoriasis:</strong> Thick, scaly skin patches</div>
+            <div class="condition-item"><strong>Seborrheic Keratoses:</strong> Benign skin growths</div>
+            <div class="condition-item"><strong>Tinea Ringworm Candidiasis:</strong> Fungal skin infections</div>
         </div>
     </div>
     """)
@@ -267,7 +485,7 @@ with gr.Blocks(
     )
     
     gr.HTML("""
-    <div style="text-align: center; margin-top: 30px; padding: 20px; background-color: #f8f9fa; border-radius: 8px;">
+    <div class="about-section">
         <h3>📚 About DermaAI</h3>
         <p>DermaAI is built using EfficientNetV2 architecture and trained on dermatological images. 
         The model analyzes skin images and provides confidence scores for 5 different skin conditions.</p>