Implement simple blue theme for universal visibility

- Remove dark/light mode detection complexity
- Use blue color scheme that works in both themes:
- Main heading: Dark blue (#1565c0)
- Section headings: Medium blue (#1976d2)
- Regular text: Light blue (#2196f3)
- Icons and SVG: Light blue (#2196f3)
- Links: Dark blue (#1565c0)
- Add blue borders to sections for consistency
- Ensures text is visible in both light and dark backgrounds
- Simple, clean, and universally readable design

app.py

@@ -158,121 +158,87 @@ def get_medical_advice(image):
 
 # Custom CSS for better styling with dark/light mode support
 custom_css = """
-/* Simple and effective theming */
-:root {
-    --heading-color-light: #1976d2;
-    --text-color-light: #000000;
-    --heading-color-dark: #64b5f6;
-    --text-color-dark: #ffffff;
-}
-
-/* Light mode - black text, blue headings */
+/* Simple blue theme that works in both light and dark modes */
 .gradio-container {
     font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
     max-width: 1200px;
     margin: 0 auto;
 }
 
+/* All text blue for universal visibility */
 .gradio-container * {
-    color: var(--text-color-light) !important;
+    color: #2196f3 !important;
+}
+
+/* Main heading - darker blue */
+.main-title h1 {
+    color: #1565c0 !important;
+    font-size: 2.5rem !important;
+    font-weight: 700 !important;
+    text-align: center !important;
 }
 
+.main-title p {
+    color: #1976d2 !important;
+    font-size: 1.2rem !important;
+    text-align: center !important;
+}
+
+/* Section headings - medium blue */
 .gradio-container h1,
 .gradio-container h2,
 .gradio-container h3,
 .gradio-container h4,
 .gradio-container h5,
-.gradio-container h6 {
-    color: var(--heading-color-light) !important;
+.gradio-container h6,
+.section-header {
+    color: #1976d2 !important;
     font-weight: 600 !important;
 }
 
-.gradio-container svg {
-    fill: var(--text-color-light) !important;
-    stroke: var(--text-color-light) !important;
-}
-
-/* Dark mode - white text, light blue headings */
-@media (prefers-color-scheme: dark) {
-    .gradio-container * {
-        color: var(--text-color-dark) !important;
-    }
-    
-    .gradio-container h1,
-    .gradio-container h2,
-    .gradio-container h3,
-    .gradio-container h4,
-    .gradio-container h5,
-    .gradio-container h6 {
-        color: var(--heading-color-dark) !important;
-        font-weight: 600 !important;
-    }
-    
-    .gradio-container svg {
-        fill: var(--text-color-dark) !important;
-        stroke: var(--text-color-dark) !important;
-    }
-}
-
-/* Specific component fixes */
-.gradio-container label,
-.gradio-container .gr-label-text,
-.gradio-container .gr-input-label,
-.gradio-container .gr-markdown,
-.gradio-container .gr-markdown *,
-.gradio-container button,
-.gradio-container span,
-.gradio-container div,
-.gradio-container p {
-    color: inherit !important;
-}
-
-/* Section headers get heading color */
 .section-header {
-    color: var(--heading-color-light) !important;
     font-size: 1.4rem !important;
-    font-weight: 600 !important;
     margin-bottom: 15px !important;
 }
 
-@media (prefers-color-scheme: dark) {
-    .section-header {
-        color: var(--heading-color-dark) !important;
-    }
+/* Regular text - lighter blue */
+.gradio-container p,
+.gradio-container span,
+.gradio-container div,
+.gradio-container li,
+.gradio-container label,
+.gradio-container button {
+    color: #2196f3 !important;
 }
 
-/* Main title */
-.main-title h1 {
-    color: var(--heading-color-light) !important;
-    font-size: 2.5rem !important;
-    font-weight: 700 !important;
-    text-align: center !important;
+/* Special components */
+.gradio-container .gr-markdown,
+.gradio-container .gr-markdown *,
+.gradio-container .gr-label-text,
+.gradio-container .gr-input-label {
+    color: #2196f3 !important;
 }
 
-.main-title p {
-    color: var(--text-color-light) !important;
-    font-size: 1.2rem !important;
-    text-align: center !important;
+/* Icons and SVG elements */
+.gradio-container svg {
+    fill: #2196f3 !important;
+    stroke: #2196f3 !important;
 }
 
-@media (prefers-color-scheme: dark) {
-    .main-title h1 {
-        color: var(--heading-color-dark) !important;
-    }
-    
-    .main-title p {
-        color: var(--text-color-dark) !important;
-    }
+/* Links */
+.gradio-container a {
+    color: #1565c0 !important;
+    text-decoration: underline;
 }
 
-/* Simple card styling without backgrounds */
+/* Simple styling without backgrounds */
 .medical-disclaimer,
 .info-box,
 .about-section {
     border-radius: 8px;
     padding: 15px;
     margin: 10px 0;
-    border: 1px solid rgba(128, 128, 128, 0.3);
+    border: 1px solid #2196f3;
 }
 
 .conditions-grid {
@@ -285,7 +251,7 @@ custom_css = """
 .condition-item {
     padding: 15px;
     border-radius: 8px;
-    border: 1px solid rgba(128, 128, 128, 0.3);
+    border: 1px solid #2196f3;
 }
 """