changes to font color

app.py

@@ -13,15 +13,15 @@ except UnicodeDecodeError:
     with open("styles.css", "r", encoding="latin-1") as f:
         custom_css = f.read()
 
-# Add more specific selector for Gradio and add !important to improve the cascading
+# Add more specific selector for Gradio and add white backgrounds
 additional_css = """
 .gradio-container .checkbox-panel, 
 div.gradio-container [class*="block"] .checkbox-panel {
-    background-color: #F0F0F0 !important;
+    background-color: #FFFFFF !important;
 }
 .gradio-container .search-panel, 
 div.gradio-container [class*="block"] .search-panel {
-    background-color: #F0F0F0 !important;
+    background-color: #FFFFFF !important;
 }
 """
 custom_css += additional_css
@@ -35,28 +35,31 @@ class CustomTheme(gr.themes.Base):
             neutral_hue=colors.gray,
             text_size=gr.themes.sizes.text_lg
         )
-        # Don't set any global background colors
+        # Set global background colors to white
         self.block_border_width = "0px"
         self.block_shadow = "none"
+        self.block_background_fill = "#FFFFFF"
+        self.background_fill_primary = "#FFFFFF"
+        self.background_fill_secondary = "#FFFFFF"
 
-# Add additional CSS for the new styles, being more specific
+# Add additional CSS for the new styles, making everything white
 custom_css += """
 /* Only override specific panels by ID */
 #checkbox-panel,
 #search-panel {
-    background-color: #F0F0F0 !important;
+    background-color: #FFFFFF !important;
 }
 
 /* Only affect immediate children of these specific panels */
 #checkbox-panel > *,
 #search-panel > * {
-    background-color: transparent !important;
+    background-color: #FFFFFF !important;
 }
 
 /* Target checkbox inputs specifically */
 #checkbox-panel input[type="checkbox"],
 #search-panel input[type="text"] {
-    background-color: transparent !important;
+    background-color: #FFFFFF !important;
 }
 """
 
@@ -613,7 +616,7 @@ with gr.Blocks(css=css, title="TD-EVAL Leaderboard", theme=custom_theme) as demo
 # JavaScript to change panel backgrounds
 searchpanel_js = """
 function applyStyles() {
-    // Add a style tag to the head to ensure textarea text color
+    // Add a style tag to the head to ensure textarea text color only
     var styleElement = document.createElement('style');
     styleElement.textContent = `
         textarea, 
@@ -622,6 +625,17 @@ function applyStyles() {
         textarea.svelte-173056l {
             color: #000000 !important;
             caret-color: #000000 !important;
+            background-color: #FFFFFF !important;
+        }
+        
+        /* Make all backgrounds white */
+        body, div, span, input, textarea, select, button {
+            background-color: #FFFFFF !important;
+        }
+        
+        /* Ensure all text is black */
+        body, div, span, input, textarea, select, button, label, p, h1, h2, h3, h4, h5, h6 {
+            color: #000000 !important;
         }
     `;
     document.head.appendChild(styleElement);
@@ -629,16 +643,11 @@ function applyStyles() {
     // Wait for the DOM to be fully loaded
     var searchPanel = document.querySelector('.search-panel');
     if (searchPanel) {
-        // Only focus on making the text black, not changing backgrounds
-        
-        // Target textarea elements which are often used for input
+        // Only focus on making the text black
         var searchTextarea = searchPanel.querySelector('textarea[data-testid="textbox"]');
         if (searchTextarea) {
             // ONLY set color, not background
-            searchTextarea.style.color = '#000000';
-            
-            // Force the color to remain black through inline style with !important
-            searchTextarea.setAttribute('style', 'color: #000000 !important;');
+            searchTextarea.setAttribute('style', 'color: #000000 !important; background-color: #FFFFFF !important;');
         }
     }
 }

styles.css

@@ -41,7 +41,7 @@ h1 {
     padding: 15px;
     width: fit-content;
     color: #000000 !important;
-    background-color: #F5F5F5;
+    background-color: #FFFFFF;
 }
 
 .variants_title {
@@ -50,7 +50,7 @@ h1 {
     color: #000000 !important;
 }
 
-/* Force all descendants of the variants container to be dark */
+/* Force all descendants of the variants container to have black text */
 .variants_container,
 .variants_container * {
     color: #000000 !important;
@@ -69,7 +69,7 @@ table {
 }
 
 table th {
-    background-color: #F0F0F0;
+    background-color: #FFFFFF;
     color: #000000;
     font-weight: bold;
     font-size: 18px;
@@ -77,11 +77,11 @@ table th {
 }
 
 table tr:not(:first-child):nth-child(odd) {
-    background-color: #F8F8F8;
+    background-color: #FFFFFF;
 }
 
 table tr:not(:first-child):nth-child(even) {
-    background-color: #F0F0F0;
+    background-color: #FFFFFF;
 }
 
 table tr:not(:first-child):nth-child(odd) td {
@@ -123,14 +123,14 @@ button:hover {
 
 /* Style the checkbox to have an orange checkmark */
 input[type="checkbox"] {
-    accent-color: #F0F0F0;
+    accent-color: #FFFFFF;
 }
 
 /* Create a custom appearance for checked checkboxes */
 input[type="checkbox"]:checked {
     position: relative;
     appearance: none;
-    background-color: #F0F0F0;
+    background-color: #FFFFFF;
     border: 1px solid #CCCCCC;
     border-radius: 3px;
 }
@@ -153,7 +153,7 @@ input[type="checkbox"]:checked::before {
     text-align: center;
     margin: 10px 0;
     padding: 5px;
-    background-color: #F0F0F0;
+    background-color: #FFFFFF;
     border-radius: 5px;
     font-size: 16px;
 }
@@ -169,7 +169,7 @@ input[type="checkbox"]:checked::before {
    ------------------------------------------------------------------ */
 .gradio-container .checkbox-container {
     margin-right: 10px;
-    background-color: #F5F5F5;
+    background-color: #FFFFFF;
     padding: 8px;
     border-radius: 5px;
 }
@@ -199,11 +199,13 @@ textarea[data-testid="textbox"],
 .scroll-hide,
 .svelte-173056l {
     color: #000000 !important;
+    background-color: #FFFFFF !important;
 }
 
 /* Apply the style when typing and focused */
 textarea[data-testid="textbox"]:focus {
     color: #000000 !important;
+    background-color: #FFFFFF !important;
 }
 
 /* ------------------------------------------------------------------
@@ -213,7 +215,7 @@ textarea[data-testid="textbox"]:focus {
     color: #000000;
     text-align: center;
     padding: 30px;
-    background-color: #F5F5F5;
+    background-color: #FFFFFF;
     border-radius: 10px;
     font-size: 18px;
     margin-top: 20px;
@@ -230,7 +232,7 @@ div.checkbox-panel,
 div[id="checkbox-panel"],
 .gradio-container div[id="checkbox-panel"],
 .gradio-container .checkbox-panel {
-    background-color: #F0F0F0 !important;
+    background-color: #FFFFFF !important;
     padding: 12px !important;
     border-radius: 6px !important;
     margin-bottom: 1rem !important;
@@ -241,27 +243,27 @@ div.search-panel,
 div[id="search-panel"],
 .gradio-container div[id="search-panel"],
 .gradio-container .search-panel {
-    background-color: #F0F0F0 !important;
+    background-color: #FFFFFF !important;
     padding: 12px !important;
     border-radius: 6px !important;
     margin-bottom: 1rem !important;
 }
 
-/* Make inner components transparent to let background show through */
+/* Make inner components white */
 #checkbox-panel *, .checkbox-panel * {
-    background-color: transparent !important;
+    background-color: #FFFFFF !important;
 }
 
 #search-panel *, .search-panel * {
-    background-color: transparent !important;
+    background-color: #FFFFFF !important;
 }
 
 /* Override other styles that might be affecting the color */
 div[class*="block"] {
-    background-color: initial; /* Reset to default */
+    background-color: #FFFFFF !important; 
 }
 
-/* Only make transparent what we need to be transparent */
+/* Make all elements white */
 .checkbox-panel .form,
 .checkbox-panel .block,
 .checkbox-panel .container,
@@ -270,12 +272,11 @@ div[class*="block"] {
 .search-panel .block,
 .search-panel .container,
 .search-panel input[type="text"] {
-    background-color: transparent !important;
+    background-color: #FFFFFF !important;
 }
 
 /* Make the textbox border visible with the same color as the text */
-.search-panel input[type="text"],
-.search-panel textarea[data-testid="textbox"] {
+.search-panel input[type="text"] {
     border: 2px solid #000000 !important;
     background-color: #FFFFFF !important;
     color: #000000 !important;
@@ -331,8 +332,8 @@ div[id="search-panel"] textarea,
 
 /* Root level variable override */
 :root {
-    --block-background-fill: transparent !important;
-    --panel-background-fill: #F0F0F0 !important;
+    --block-background-fill: #FFFFFF !important;
+    --panel-background-fill: #FFFFFF !important;
 }
 
 /* Target the specific Gradio label element */
@@ -364,4 +365,25 @@ div[id="search-panel"] span {
 div[id="search-panel"] span[data-testid="block-info"] {
     color: #000000 !important;
     font-weight: bold !important;
+}
+
+/* Fix for block labels in gradio */
+span[data-testid="block-info"] {
+    color: #000000 !important;
+    background-color: #FFFFFF !important;
+}
+
+/* Additional style to ensure text color in textareas and inputs is black */
+textarea, input, textarea[data-testid="textbox"] {
+    color: #000000 !important;
+}
+
+/* Force black text color for search textbox */
+.search-panel textarea,
+textarea.scroll-hide,
+textarea.svelte-173056l,
+textarea[data-testid="textbox"] {
+    color: #000000 !important;
+    caret-color: #000000 !important;
+    background-color: #FFFFFF !important;
 }