fix: css issue

app.py

@@ -611,7 +611,7 @@ def refresh_gallery_table():
     return load_gallery_table()
 
 
-# Enhanced CSS with better styling
+# Enhanced CSS with dark mode support
 enhanced_css = """
 /* Hide Gradio footer */
 footer {visibility: hidden}
@@ -626,7 +626,7 @@ body {
     max-height: 700px;
     overflow-y: auto;
     padding: 20px;
-    background-color: #f8f9fa;
+    background-color: var(--background-fill-primary, #f8f9fa);
 }
 
 /* Demo notice */
@@ -650,14 +650,15 @@ body {
     opacity: 0.9;
 }
 
-/* Eval card styling */
+/* Eval card styling - Light mode default */
 .eval-card {
-    background: white;
+    background: var(--background-fill-secondary, white);
+    color: var(--body-text-color, #374151);
     border-radius: 12px;
     padding: 25px;
     margin-bottom: 25px;
     box-shadow: 0 4px 20px rgba(0,0,0,0.08);
-    border: 1px solid #e0e0e0;
+    border: 1px solid var(--border-color-primary, #e0e0e0);
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
@@ -689,7 +690,7 @@ body {
 }
 
 .card-title {
-    color: #1976d2;
+    color: var(--color-accent, #1976d2);
     margin: 0;
     font-size: 1.4em;
     font-weight: 600;
@@ -716,6 +717,7 @@ body {
     margin: 0 0 15px 0;
     line-height: 1.6;
     font-size: 1.02em;
+    color: var(--body-text-color, #374151);
 }
 
 .card-meta {
@@ -728,19 +730,20 @@ body {
 .card-meta p {
     margin: 0;
     padding: 8px 12px;
-    background: #f5f5f5;
+    background: var(--input-background-fill, #f5f5f5);
+    color: var(--body-text-color, #374151);
     border-radius: 6px;
     font-size: 0.95em;
 }
 
 /* Coverage section */
 .coverage-section {
-    border-top: 1px solid #e0e0e0;
+    border-top: 1px solid var(--border-color-primary, #e0e0e0);
     padding-top: 20px;
 }
 
 .coverage-section h4 {
-    color: #1976d2;
+    color: var(--color-accent, #1976d2);
     margin: 0 0 15px 0;
     font-size: 1.1em;
     font-weight: 600;
@@ -761,12 +764,12 @@ body {
 
 .coverage-label {
     font-weight: 500;
-    color: #333;
+    color: var(--body-text-color, #333);
     font-size: 0.9em;
 }
 
 .coverage-bar {
-    background: #e0e0e0;
+    background: var(--neutral-200, #e0e0e0);
     border-radius: 10px;
     height: 8px;
     overflow: hidden;
@@ -781,7 +784,7 @@ body {
 
 .coverage-text {
     font-size: 0.85em;
-    color: #666;
+    color: var(--body-text-color-subdued, #666);
     min-width: 100px;
     text-align: right;
 }
@@ -792,7 +795,7 @@ body {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
-    border-top: 1px solid #e0e0e0;
+    border-top: 1px solid var(--border-color-primary, #e0e0e0);
     padding-top: 15px;
 }
 
@@ -801,7 +804,7 @@ body {
     align-items: center;
     padding: 8px 16px;
     background: linear-gradient(135deg, #1976d2, #1565c0);
-    color: white;
+    color: white !important;
     text-decoration: none;
     border-radius: 6px;
     font-size: 0.9em;
@@ -813,7 +816,7 @@ body {
     transform: translateY(-1px);
     box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
     text-decoration: none;
-    color: white;
+    color: white !important;
 }
 
 /* Error styling */
@@ -821,15 +824,123 @@ body {
     text-align: center;
     padding: 40px;
     color: #d32f2f;
-    background: #ffebee;
+    background: var(--error-background, #ffebee);
     border-radius: 8px;
-    border: 1px solid #ffcdd2;
+    border: 1px solid var(--error-border, #ffcdd2);
 }
 
 .error-message h3 {
     margin: 0 0 15px 0;
 }
 
+/* Dark mode specific overrides */
+.dark .gallery-container {
+    background-color: var(--background-fill-primary, #0b0f19);
+}
+
+.dark .eval-card {
+    background: var(--background-fill-secondary, #1f2937);
+    color: var(--body-text-color, #f3f4f6);
+    border: 1px solid var(--border-color-primary, #374151);
+    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+}
+
+.dark .eval-card:hover {
+    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
+}
+
+.dark .card-title {
+    color: var(--color-accent, #60a5fa);
+}
+
+.dark .card-summary {
+    color: var(--body-text-color, #f3f4f6);
+}
+
+.dark .card-meta p {
+    background: var(--input-background-fill, #374151);
+    color: var(--body-text-color, #f3f4f6);
+}
+
+.dark .coverage-section {
+    border-top: 1px solid var(--border-color-primary, #4b5563);
+}
+
+.dark .coverage-section h4 {
+    color: var(--color-accent, #60a5fa);
+}
+
+.dark .coverage-label {
+    color: var(--body-text-color, #f3f4f6);
+}
+
+.dark .coverage-bar {
+    background: var(--neutral-700, #4b5563);
+}
+
+.dark .coverage-text {
+    color: var(--body-text-color-subdued, #9ca3af);
+}
+
+.dark .card-links {
+    border-top: 1px solid var(--border-color-primary, #4b5563);
+}
+
+.dark .error-message {
+    background: var(--error-background, #7f1d1d);
+    border: 1px solid var(--error-border, #991b1b);
+    color: #fca5a5;
+}
+
+/* Alternative dark mode detection using data attributes or CSS variables */
+[data-theme="dark"] .eval-card,
+html[data-theme="dark"] .eval-card {
+    background: #1f2937;
+    color: #f3f4f6;
+    border: 1px solid #374151;
+}
+
+[data-theme="dark"] .card-title,
+html[data-theme="dark"] .card-title {
+    color: #60a5fa;
+}
+
+[data-theme="dark"] .card-meta p,
+html[data-theme="dark"] .card-meta p {
+    background: #374151;
+    color: #f3f4f6;
+}
+
+[data-theme="dark"] .coverage-section,
+html[data-theme="dark"] .coverage-section {
+    border-top: 1px solid #4b5563;
+}
+
+[data-theme="dark"] .coverage-section h4,
+html[data-theme="dark"] .coverage-section h4 {
+    color: #60a5fa;
+}
+
+[data-theme="dark"] .coverage-label,
+html[data-theme="dark"] .coverage-label {
+    color: #f3f4f6;
+}
+
+[data-theme="dark"] .coverage-bar,
+html[data-theme="dark"] .coverage-bar {
+    background: #4b5563;
+}
+
+[data-theme="dark"] .coverage-text,
+html[data-theme="dark"] .coverage-text {
+    color: #9ca3af;
+}
+
+[data-theme="dark"] .card-links,
+html[data-theme="dark"] .card-links {
+    border-top: 1px solid #4b5563;
+}
+
 /* Responsive design */
 @media (max-width: 768px) {
     .gallery-container {
@@ -862,6 +973,52 @@ body {
         grid-template-columns: 1fr;
     }
 }
+
+/* Force dark theme detection using Gradio's CSS variables */
+@media (prefers-color-scheme: dark) {
+    .eval-card {
+        background: var(--background-fill-secondary, #1f2937) !important;
+        color: var(--body-text-color, #f3f4f6) !important;
+        border: 1px solid var(--border-color-primary, #374151) !important;
+    }
+    
+    .card-title {
+        color: var(--color-accent, #60a5fa) !important;
+    }
+    
+    .card-summary {
+        color: var(--body-text-color, #f3f4f6) !important;
+    }
+    
+    .card-meta p {
+        background: var(--input-background-fill, #374151) !important;
+        color: var(--body-text-color, #f3f4f6) !important;
+    }
+    
+    .coverage-section {
+        border-top: 1px solid var(--border-color-primary, #4b5563) !important;
+    }
+    
+    .coverage-section h4 {
+        color: var(--color-accent, #60a5fa) !important;
+    }
+    
+    .coverage-label {
+        color: var(--body-text-color, #f3f4f6) !important;
+    }
+    
+    .coverage-bar {
+        background: var(--neutral-700, #4b5563) !important;
+    }
+    
+    .coverage-text {
+        color: var(--body-text-color-subdued, #9ca3af) !important;
+    }
+    
+    .card-links {
+        border-top: 1px solid var(--border-color-primary, #4b5563) !important;
+    }
+}
 """
 
 # Create the interface