style theme

app.py

@@ -12,7 +12,7 @@ import plotly.express as px
 import plotly.graph_objects as go
 from apscheduler.schedulers.background import BackgroundScheduler
 import numpy as np
-from gradio.themes.utils import fonts
+from gradio.themes.utils import fonts, colors
 
 from src.about import (
     CITATION_BUTTON_LABEL,
@@ -71,6 +71,9 @@ except Exception as e:
     LEADERBOARD_DF = pd.DataFrame()
 
 custom_theme = gr.themes.Default(
+    primary_hue=colors.slate,
+    secondary_hue=colors.slate,
+    neutral_hue=colors.neutral,
     font=(fonts.GoogleFont("Inter"), "sans-serif")
 ).set(
     # font_size="16px",
@@ -78,57 +81,58 @@ custom_theme = gr.themes.Default(
     body_background_fill_dark="#0f0f10",
     body_text_color="#f4f4f5",
     body_text_color_subdued="#a1a1aa",
-    block_background_fill="#262626",
-    block_border_color="#27272a",
+    block_background_fill="#1e1e1e",            # Cooler Grey
+    block_border_color="#333333",                # Cooler Grey
     block_shadow="none",
-    button_primary_background_fill="#27272a",
+    # Swapped primary and secondary button styles
+    button_primary_background_fill="#333333",      # Cooler Grey
     button_primary_text_color="#f4f4f5",
-    button_primary_border_color="#27272a",
+    button_primary_border_color="#333333",     # Cooler Grey
     button_secondary_background_fill="#f4f4f5",
     button_secondary_text_color="#0f0f10",
     button_secondary_border_color="#f4f4f5",
-    input_background_fill="#1f1f23",
-    input_border_color="#3f3f46",
+    input_background_fill="#1e1e1e",            # Cooler Grey
+    input_border_color="#333333",                # Cooler Grey
     input_placeholder_color="#71717a",
-    table_border_color="#3f3f46",
-    table_even_background_fill="#1c1c1f",
-    table_odd_background_fill="#262626",
+    table_border_color="#333333",                # Cooler Grey
+    table_even_background_fill="#2d2d2d",         # Cooler Grey (Slightly lighter)
+    table_odd_background_fill="#1e1e1e",         # Cooler Grey
     table_text_color="#f4f4f5",
     link_text_color="#ffffff",
-    border_color_primary="#3f3f46",
-    background_fill_secondary="#27272a",
+    border_color_primary="#333333",             # Cooler Grey
+    background_fill_secondary="#333333",          # Cooler Grey
     color_accent="#f4f4f5",
-    border_color_accent="#27272a",
-    button_primary_background_fill_hover="#3f3f46",
+    border_color_accent="#333333",                # Cooler Grey
+    button_primary_background_fill_hover="#424242", # Cooler Grey
     block_title_text_color="#f4f4f5",
     accordion_text_color="#f4f4f5",
-    panel_background_fill="#262626",
-    panel_border_color="#27272a",
+    panel_background_fill="#1e1e1e",            # Cooler Grey
+    panel_border_color="#333333",                # Cooler Grey
     # Explicitly setting primary/secondary/accent colors/borders
     background_fill_primary="#0f0f10",
     background_fill_primary_dark="#0f0f10",
-    background_fill_secondary_dark="#27272a",
-    border_color_primary_dark="#3f3f46",
-    border_color_accent_dark="#27272a",
-    border_color_accent_subdued="#3f3f46",
-    border_color_accent_subdued_dark="#3f3f46",
+    background_fill_secondary_dark="#333333",    # Cooler Grey
+    border_color_primary_dark="#333333",         # Cooler Grey
+    border_color_accent_dark="#333333",          # Cooler Grey
+    border_color_accent_subdued="#424242",       # Cooler Grey
+    border_color_accent_subdued_dark="#424242",  # Cooler Grey
     color_accent_soft="#a1a1aa",
     color_accent_soft_dark="#a1a1aa",
     # Explicitly setting input hover/focus states
-    input_background_fill_dark="#1f1f23",
-    input_background_fill_focus="#3f3f46",
-    input_background_fill_focus_dark="#3f3f46",
-    input_background_fill_hover="#27272a",
-    input_background_fill_hover_dark="#27272a",
-    input_border_color_dark="#3f3f46",
+    input_background_fill_dark="#1e1e1e",      # Cooler Grey
+    input_background_fill_focus="#424242",     # Cooler Grey
+    input_background_fill_focus_dark="#424242",# Cooler Grey
+    input_background_fill_hover="#2d2d2d",      # Cooler Grey
+    input_background_fill_hover_dark="#2d2d2d", # Cooler Grey
+    input_border_color_dark="#333333",          # Cooler Grey
     input_border_color_focus="#f4f4f5",
     input_border_color_focus_dark="#f4f4f5",
-    input_border_color_hover="#71717a",
-    input_border_color_hover_dark="#71717a",
+    input_border_color_hover="#424242",        # Cooler Grey
+    input_border_color_hover_dark="#424242",   # Cooler Grey
     input_placeholder_color_dark="#71717a",
     # Explicitly set dark variants for table backgrounds
-    table_even_background_fill_dark="#1c1c1f",
-    table_odd_background_fill_dark="#262626",
+    table_even_background_fill_dark="#2d2d2d",    # Cooler Grey
+    table_odd_background_fill_dark="#1e1e1e",     # Cooler Grey
     # Explicitly set dark text variants
     body_text_color_dark="#f4f4f5",
     body_text_color_subdued_dark="#a1a1aa",
@@ -136,10 +140,10 @@ custom_theme = gr.themes.Default(
     accordion_text_color_dark="#f4f4f5",
     table_text_color_dark="#f4f4f5",
     # Explicitly set dark panel/block variants
-    panel_background_fill_dark="#262626",
-    panel_border_color_dark="#27272a",
-    block_background_fill_dark="#262626",
-    block_border_color_dark="#27272a",
+    panel_background_fill_dark="#1e1e1e",        # Cooler Grey
+    panel_border_color_dark="#333333",            # Cooler Grey
+    block_background_fill_dark="#1e1e1e",        # Cooler Grey
+    block_border_color_dark="#333333",            # Cooler Grey
 )
 
 # Define the update_column_choices function before initializing the leaderboard components