Implement theme-aware dark mode styling and enhance theme update functionality in app.py

app.py

@@ -137,18 +137,78 @@ with gr.Blocks(
     .explanation-box * {
         color: #1a1a1a !important;
     }
-    /* Dark mode styling */
-    .dark .explanation-box {
+    .explanation-box strong,
+    .explanation-box b {
+        color: #1a1a1a !important;
+        font-weight: bold;
+    }
+    /* Dark mode styling - using theme-aware class */
+    .theme-dark .explanation-box {
         background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%) !important;
-        border: 1px solid #334155;
+        border: 1px solid #334155 !important;
     }
-    .dark .explanation-box,
-    .dark .explanation-box * {
+    .theme-dark .explanation-box,
+    .theme-dark .explanation-box * {
         color: #f1f5f9 !important;
     }
-    .dark .explanation-box strong,
-    .dark .explanation-box b {
+    .theme-dark .explanation-box strong,
+    .theme-dark .explanation-box b {
         color: #fbbf24 !important;
+        font-weight: bold;
+    }
+    """,
+    js="""
+    function() {
+        // Function to update theme class
+        function updateTheme() {
+            const gradioApp = document.querySelector('gradio-app');
+            const body = document.body;
+            const html = document.documentElement;
+            
+            // Check multiple possible dark mode indicators
+            const isDark = body.classList.contains('dark') || 
+                          html.classList.contains('dark') ||
+                          gradioApp?.classList.contains('dark') ||
+                          window.matchMedia('(prefers-color-scheme: dark)').matches;
+            
+            // Apply theme class to body for consistent styling
+            if (isDark) {
+                body.classList.add('theme-dark');
+                body.classList.remove('theme-light');
+            } else {
+                body.classList.add('theme-light');
+                body.classList.remove('theme-dark');
+            }
+        }
+        
+        // Update theme immediately
+        updateTheme();
+        
+        // Watch for theme changes
+        const observer = new MutationObserver(updateTheme);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class', 'data-theme']
+        });
+        observer.observe(document.body, {
+            attributes: true,
+            attributeFilter: ['class', 'data-theme']
+        });
+        
+        // Also check when gradio-app loads
+        const checkGradioApp = setInterval(() => {
+            const app = document.querySelector('gradio-app');
+            if (app) {
+                observer.observe(app, {
+                    attributes: true,
+                    attributeFilter: ['class', 'data-theme']
+                });
+                clearInterval(checkGradioApp);
+            }
+        }, 100);
+        
+        // Listen for system theme changes
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme);
     }
     """
 ) as app: