Fixes for dark mode

app.py

@@ -487,12 +487,12 @@ with gr.Blocks(title="CODA: Wildlife Photo Classification Challenge",
                css="""
                .subtle-outline {
                    border: 1px solid var(--border-color-primary) !important;
-                   background: transparent !important;
+                   background: var(--background-fill-secondary) !important;
                    border-radius: var(--radius-lg);
                    padding: 1rem;
                }
                .subtle-outline .flex {
-                   background-color: white !important;
+                   background-color: var(--background-fill-secondary) !important;
                }
 
                /* Popup overlay styles */
@@ -517,7 +517,7 @@ with gr.Blocks(title="CODA: Wildlife Photo Classification Challenge",
                }
 
                .popup-content {
-                   background: white !important;
+                   background: var(--background-fill-primary) !important;
                    padding: 2rem !important;
                    border-radius: 1rem !important;
                    max-width: 850px;
@@ -527,10 +527,11 @@ with gr.Blocks(title="CODA: Wildlife Photo Classification Challenge",
                    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
                    border: none !important;
                    margin: 0 !important;
+                   color: var(--body-text-color) !important;
                }
 
                .popup-content > div {
-                   background: white !important;
+                   background: var(--background-fill-primary) !important;
                    border: none !important;
                    padding: 0 !important;
                    margin: 0 !important;
@@ -538,6 +539,14 @@ with gr.Blocks(title="CODA: Wildlife Photo Classification Challenge",
                    max-height: none !important;
                }
 
+               .popup-content h1,
+               .popup-content h2,
+               .popup-content h3,
+               .popup-content p,
+               .popup-content li {
+                   color: var(--body-text-color) !important;
+               }
+
                /* Ensure gradio column components don't interfere with scrolling */
                .popup-content .gradio-column {
                    overflow-y: visible !important;
@@ -618,7 +627,7 @@ with gr.Blocks(title="CODA: Wildlife Photo Classification Challenge",
                }
 
                .help-popup-content {
-                   background: white !important;
+                   background: var(--background-fill-primary) !important;
                    padding: 1.5rem !important;
                    border-radius: 0.5rem !important;
                    max-width: 600px;
@@ -626,15 +635,24 @@ with gr.Blocks(title="CODA: Wildlife Photo Classification Challenge",
                    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
                    border: none !important;
                    margin: 0 !important;
+                   color: var(--body-text-color) !important;
                }
 
                .help-popup-content > div {
-                   background: white !important;
+                   background: var(--background-fill-primary) !important;
                    border: none !important;
                    padding: 0 !important;
                    margin: 0 !important;
                }
 
+               .help-popup-content h1,
+               .help-popup-content h2,
+               .help-popup-content h3,
+               .help-popup-content p,
+               .help-popup-content li {
+                   color: var(--body-text-color) !important;
+               }
+
                /* Inline help button */
                .inline-help-btn {
                    display: inline-block;
@@ -703,6 +721,11 @@ with gr.Blocks(title="CODA: Wildlife Photo Classification Challenge",
                    padding: 0 !important;
                    margin: 0 !important;
                }
+
+               /* Ensure text in predictions panel is visible in dark mode */
+               .subtle-outline * {
+                   color: var(--body-text-color) !important;
+               }
                """) as demo:
     # Main page title
     gr.Markdown("# CODA: Consensus-Driven Active Model Selection", elem_classes="text-center")