changes to font color

app.py

@@ -17,21 +17,21 @@ except UnicodeDecodeError:
 additional_css = """
 .gradio-container .checkbox-panel, 
 div.gradio-container [class*="block"] .checkbox-panel {
-    background-color: green !important;
+    background-color: #27272A !important;
 }
 .gradio-container .search-panel, 
 div.gradio-container [class*="block"] .search-panel {
-    background-color: green !important;
+    background-color: #27272A !important;
 }
 """
 custom_css += additional_css
 
-# Create a custom theme with green for our panels
+# Create a custom theme with dark gray for our panels
 class CustomTheme(gr.themes.Base):
     def __init__(self):
         super().__init__(
             primary_hue=colors.red,
-            secondary_hue=colors.green,
+            secondary_hue=colors.gray,
             neutral_hue=colors.gray,
             text_size=gr.themes.sizes.text_lg
         )
@@ -40,7 +40,7 @@ class CustomTheme(gr.themes.Base):
         self.block_border_width = "0px"
         self.block_shadow = "none"
         # Set color variables for all panel backgrounds
-        self.background_fill_secondary = "green"  # Used for panels
+        self.background_fill_secondary = "#27272A"  # Used for panels
 
 # Add additional CSS for the new styles
 custom_css += """
@@ -49,6 +49,7 @@ custom_css += """
     --block-background-fill: transparent !important;
     --background-fill-primary: transparent !important;
     --background-fill-secondary: transparent !important;
+    --panel-background-fill: #27272A !important;
 }
 
 /* Target Gradio's internal structure directly */
@@ -61,7 +62,7 @@ custom_css += """
 [id="search-panel"],
 [class*="block"] [class*="checkbox-panel"],
 [class*="block"] [class*="search-panel"] {
-    background-color: green !important;
+    background-color: #27272A !important;
 }
 
 /* Force all child elements to be transparent */
@@ -377,7 +378,7 @@ with gr.Blocks(css=custom_css, title="TD-EVAL Leaderboard", theme=custom_theme)
         // Fix checkbox panel
         var checkboxPanels = document.querySelectorAll('.checkbox-panel');
         for (var i = 0; i < checkboxPanels.length; i++) {
-            checkboxPanels[i].style.backgroundColor = 'green';
+            checkboxPanels[i].style.backgroundColor = '#27272A';
             
             // Find ALL child elements and make their backgrounds transparent
             var children = checkboxPanels[i].querySelectorAll('*');
@@ -389,7 +390,7 @@ with gr.Blocks(css=custom_css, title="TD-EVAL Leaderboard", theme=custom_theme)
         // Fix search panel
         var searchPanels = document.querySelectorAll('.search-panel');
         for (var i = 0; i < searchPanels.length; i++) {
-            searchPanels[i].style.backgroundColor = 'green';
+            searchPanels[i].style.backgroundColor = '#27272A';
             
             // Find ALL child elements and make their backgrounds transparent
             var children = searchPanels[i].querySelectorAll('*');
@@ -402,7 +403,7 @@ with gr.Blocks(css=custom_css, title="TD-EVAL Leaderboard", theme=custom_theme)
         var blocks = document.querySelectorAll('.block');
         blocks.forEach(function(block) {
             if (block.querySelector('.checkbox-panel') || block.classList.contains('checkbox-panel')) {
-                block.style.backgroundColor = 'green';
+                block.style.backgroundColor = '#27272A';
                 
                 // Make all direct children transparent
                 var children = block.children;
@@ -413,7 +414,7 @@ with gr.Blocks(css=custom_css, title="TD-EVAL Leaderboard", theme=custom_theme)
                 }
             }
             if (block.querySelector('.search-panel') || block.classList.contains('search-panel')) {
-                block.style.backgroundColor = 'green';
+                block.style.backgroundColor = '#27272A';
                 
                 // Make all direct children transparent
                 var children = block.children;
@@ -448,7 +449,7 @@ with gr.Blocks(css=custom_css, title="TD-EVAL Leaderboard", theme=custom_theme)
     ''')
     
     # Add a direct HTML wrapper with inline style for the checkboxes
-    gr.HTML('<div style="background-color: green; padding: 12px; border-radius: 6px; margin-bottom: 1rem;">')
+    gr.HTML('<div style="background-color: #27272A; padding: 12px; border-radius: 6px; margin-bottom: 1rem;">')
     
     with gr.Row(elem_classes="checkbox-panel", elem_id="checkbox-panel"):
         cb_mwoz        = gr.Checkbox(label="mwoz",        value=True)
@@ -458,7 +459,7 @@ with gr.Blocks(css=custom_css, title="TD-EVAL Leaderboard", theme=custom_theme)
     gr.HTML('</div>')
     
     # Add a direct HTML wrapper with inline style for the search
-    gr.HTML('<div style="background-color: green; padding: 12px; border-radius: 6px; margin-bottom: 1rem;">')
+    gr.HTML('<div style="background-color: #27272A; padding: 12px; border-radius: 6px; margin-bottom: 1rem;">')
     
     with gr.Row(elem_classes="search-panel", elem_id="search-panel"):
         search_input = gr.Textbox(

styles.css

@@ -205,7 +205,7 @@ div.gradio-container [class*="row"] div.checkbox-panel,
 div.checkbox-panel,
 .checkbox-panel,
 #checkbox-panel {
-    background-color: green !important;
+    background-color: #27272A !important;
     padding: 12px !important;
     border-radius: 6px !important;
     margin-bottom: 1rem !important;
@@ -220,7 +220,7 @@ div.gradio-container [class*="row"] div.search-panel,
 div.search-panel,
 .search-panel,
 #search-panel {
-    background-color: green !important;
+    background-color: #27272A !important;
     padding: 12px !important;
     border-radius: 6px !important;
     margin-bottom: 1rem !important;
@@ -233,7 +233,7 @@ div[class*="block"].checkbox-panel,
 div[class*="block"] div.search-panel,
 div.search-panel[class*="block"],
 div[class*="block"].search-panel {
-    background-color: green !important;
+    background-color: #27272A !important;
 }
 
 /* Target the gradio block wrapper directly */