Update app.py

app.py

@@ -50,21 +50,22 @@ if not benchmarks or len(benchmarks) == 0:
 else:
     print(f"Found {len(benchmarks)} existing benchmarks.")
 
-# Custom CSS with fixes for text visibility
+# Custom CSS with better theme compatibility
 css = """
-/* Fix for text visibility */
-.gradio-container {
-    color: #333333 !important;
-}
-
-/* Fix for info boxes */
+/* Theme-adaptive colored info box */
 .info-text {
-    background-color: #f0f7ff;
+    background-color: rgba(53, 130, 220, 0.1);
     padding: 12px;
     border-radius: 8px;
     border-left: 4px solid #3498db;
     margin: 12px 0;
-    color: #222222 !important;
+}
+
+/* High-contrast text for elements - works in light and dark themes */
+.info-text, .header, .footer, .tab-content, 
+button, input, textarea, select, option, 
+.gradio-container *, .markdown-text {
+    color: var(--text-color, inherit) !important;
 }
 
 /* Container styling */
@@ -77,7 +78,8 @@ css = """
 .header {
     text-align: center;
     margin-bottom: 20px;
-    color: #222222 !important;
+    font-weight: bold;
+    font-size: 24px;
 }
 
 /* Footer styling */
@@ -85,49 +87,52 @@ css = """
     text-align: center;
     margin-top: 40px;
     padding: 20px;
-    border-top: 1px solid #eee;
-    color: #222222 !important;
+    border-top: 1px solid var(--border-color-primary, #eee);
 }
 
-/* Fix for tab content */
-.tab-content {
-    color: #222222 !important;
+/* Force high contrast on specific input areas */
+input[type="text"], input[type="password"], textarea {
+    background-color: var(--background-fill-primary) !important;
+    color: var(--body-text-color) !important;
 }
 
-/* Fix for highlighted text areas */
-.highlight-text {
-    background-color: #f0f7ff;
-    color: #333333;
+/* Force text visibility in multiple contexts */
+.gradio-markdown p, .gradio-markdown h1, .gradio-markdown h2, 
+.gradio-markdown h3, .gradio-markdown h4, .gradio-markdown li {
+    color: var(--body-text-color) !important;
 }
 
-/* Fix for dataframes */
-table.dataframe {
-    color: #333333 !important;
+/* Make Textbox placeholders more visible */
+::placeholder {
+    color: var(--body-text-color-subdued) !important;
+    opacity: 0.7 !important;
 }
 
-/* Fix for dropdown text */
-select, option {
-    color: #333333 !important;
+/* Make tab labels more visible */
+.tab-nav button {
+    color: var(--body-text-color) !important;
 }
 
-/* Fix for button text */
-button {
-    color: #ffffff !important;
+/* Improve contrast in dataframes */
+table.dataframe th, table.dataframe td {
+    color: var(--body-text-color) !important;
 }
 
-/* Fix for input fields */
-input, textarea {
-    color: #333333 !important;
+/* Ensure buttons have visible text */
+button.primary {
+    color: white !important;
 }
 
-/* General text fix */
-p, h1, h2, h3, h4, h5, h6, span, div {
-    color: #333333 !important;
+/* Force high contrast for dropdown/select options */
+.select-option {
+    color: var(--body-text-color) !important;
 }
 
-/* Ensure markdown is visible */
-.markdown-text {
-    color: #333333 !important;
+/* Improve visibility in dark mode specifically */
+@media (prefers-color-scheme: dark) {
+    .info-text {
+        background-color: rgba(53, 130, 220, 0.2);
+    }
 }
 """
 
@@ -142,7 +147,7 @@ def start_queue_worker():
         print(f"Error starting queue worker: {e}")
 
 # Create Gradio app
-with gr.Blocks(css=css, title="Dynamic Highscores") as app:
+with gr.Blocks(css=css, title="Dynamic Highscores", theme=gr.themes.Default()) as app:
     gr.Markdown("# 🏆 Dynamic Highscores", elem_classes=["header"])
     gr.Markdown("""
     Welcome to Dynamic Highscores - a community benchmark platform for evaluating and comparing language models.