Update app.py

app.py

@@ -401,14 +401,22 @@ def parse_and_generate_plot(df_data: list, indices_str: str):
 
 def build_app() -> gr.Blocks:
     row_css = """
+    /* General Body */
     body { background-color: #f5f7fa !important; }
+    .gradio-container { max-width: 100% !important; padding: 20px !important; background-color: #f5f7fa !important; }
     
-    /* Row number column styling */
-    .metrics-table th:first-child, .metrics-table td:first-child {
-        width: 60px !important; text-align: center !important;
-        padding: 8px !important; font-weight: 600 !important;
-        background-color: #f0f0f0 !important;
+    /* Headers and Text */
+    .gradio-container h1 { color: #24292e !important; font-weight: 700; margin-bottom: 24px; }
+    .gradio-container h3 { color: #24292e !important; font-weight: 600; margin-bottom: 16px; }
+    .gradio-container label, .gradio-container p, .gradio-container span, .gradio-container div { color: #24292e !important; }
+    
+    /* Input Fields & Blocks */
+    .gradio-container .block, .gradio-container .form, .gradio-container .gr-box, .gradio-container .gr-input {
+        background-color: white !important; border-color: #e1e4e8 !important;
     }
+    .gradio-container input[type="checkbox"] { accent-color: #0366d6 !important; }
+
+    /* Search Box Styling */
     .search-box {
         background: white !important; padding: 16px !important;
         border-radius: 6px; border: 2px solid #e1e4e8 !important;
@@ -422,14 +430,46 @@ def build_app() -> gr.Blocks:
         padding: 10px !important; box-shadow: none !important;
     }
     .search-box input.scroll-hide:focus { border-color: #0366d6 !important; outline: none !important; }
-    
-    .gradio-container { max-width: 100% !important; padding: 20px !important; background-color: #f5f7fa !important; }
-    .gradio-container .block, .gradio-container .form, .gradio-container .gr-box, .gradio-container .gr-input {
-        background-color: white !important; border-color: #e1e4e8 !important;
+
+    /* Filter Section Styling */
+    .filter-section {
+        background: white !important; padding: 0 !important; border-radius: 6px;
+        border: 2px solid #e1e4e8 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
     }
-    .gradio-container label, .gradio-container p, .gradio-container span, .gradio-container div { color: #24292e !important; }
-    
-    /* Table styling */
+    .filter-section .wrap, .filter-section .block, .filter-section .container, .filter-section .group { background: transparent !important; }
+    .filter-section .wrap { padding: 20px !important; }
+
+    /* ACCORDION STYLING */
+    .gradio-container .accordion {
+        background: white !important; border: 2px solid #e1e4e8 !important;
+        border-radius: 6px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+    }
+    .info-section { padding: 16px; background: white !important; }
+    .info-section a { color: #0366d6 !important; }
+
+    /* --- FIX FOR DARK MODE / NIGHT MODE --- */
+    /* This forces the accordion button text and icons to stay dark */
+    .gradio-container .accordion button, 
+    .gradio-container .accordion span {
+        color: #24292e !important;
+    }
+    /* This forces the expand arrow to be dark */
+    .gradio-container .accordion svg {
+        fill: #24292e !important;
+        color: #24292e !important;
+    }
+    /* --------------------------------------- */
+
+    /* Table Container & Plot */
+    .table-container {
+        overflow-x: auto; overflow-y: auto; max-height: 75vh;
+        border: 2px solid #e1e4e8; border-radius: 6px;
+        background: white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+    }
+    .gradio-container .plot-container { width: 100% !important; }
+
+    /* Table Internal Styling */
+    .gradio-container table.metrics-table { border-collapse: collapse; width: 100%; background: white; }
     .gradio-container table.metrics-table th, .gradio-container table.metrics-table td {
         padding: 10px 14px; border: 1.5px solid #e1e4e8; white-space: nowrap;
         font-size: 13px; text-align: left; color: #24292e !important;
@@ -441,33 +481,15 @@ def build_app() -> gr.Blocks:
     }
     .gradio-container table.metrics-table tbody tr:nth-child(even) { background-color: #f6f8fa; }
     .gradio-container table.metrics-table tbody tr:hover { background-color: #e1e4e8; }
-    .gradio-container table.metrics-table { border-collapse: collapse; width: 100%; background: white; }
     .gradio-container table.metrics-table a { color: #0366d6 !important; text-decoration: none; }
     .gradio-container table.metrics-table a:hover { text-decoration: underline; }
     
-    /* Allow plot container to expand */
-    .gradio-container .plot-container { width: 100% !important; }
-    
-    .table-container {
-        overflow-x: auto; overflow-y: auto; max-height: 75vh;
-        border: 2px solid #e1e4e8; border-radius: 6px;
-        background: white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
-    }
-    .filter-section {
-        background: white !important; padding: 0 !important; border-radius: 6px;
-        border: 2px solid #e1e4e8 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
-    }
-    .filter-section .wrap, .filter-section .block, .filter-section .container, .filter-section .group { background: transparent !important; }
-    .filter-section .wrap { padding: 20px !important; }
-    .gradio-container .accordion {
-        background: white !important; border: 2px solid #e1e4e8 !important;
-        border-radius: 6px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+    /* Row number column styling */
+    .metrics-table th:first-child, .metrics-table td:first-child {
+        width: 60px !important; text-align: center !important;
+        padding: 8px !important; font-weight: 600 !important;
+        background-color: #f0f0f0 !important;
     }
-    .info-section { padding: 16px; background: white !important; }
-    .info-section a { color: #0366d6 !important; }
-    .gradio-container h1 { color: #24292e !important; font-weight: 700; margin-bottom: 24px; }
-    .gradio-container h3 { color: #24292e !important; font-weight: 600; margin-bottom: 16px; }
-    .gradio-container input[type="checkbox"] { accent-color: #0366d6 !important; }
     """
 
     with gr.Blocks(title="MoE-CAP Dashboard", css=row_css, theme=gr.themes.Default()) as demo: