Add dark mode support for Plotly chart backgrounds

Use JavaScript to dynamically update Plotly chart backgrounds when
dark mode is toggled. Sets paper_bgcolor, plot_bgcolor, font color,
and grid colors appropriately for dark/light modes.

app.py

@@ -135,47 +135,51 @@ const tooltipInterval = setInterval(() => {
 </script>
 """
 
-# JavaScript to swap OpenHands logos based on dark mode
-logo_swap_script = """
+# JavaScript to handle dark mode for Plotly charts and OpenHands logos
+dark_mode_script = """
 <script>
-function updateOpenHandsLogos() {
+function updateChartsForDarkMode() {
     const isDark = document.body.classList.contains('dark');
     
-    // Find all Plotly chart images
-    const images = document.querySelectorAll('.js-plotly-plot image');
+    // Update Plotly chart backgrounds
+    const plots = document.querySelectorAll('.js-plotly-plot');
+    plots.forEach(plot => {
+        if (plot._fullLayout) {
+            Plotly.relayout(plot, {
+                'paper_bgcolor': isDark ? '#1f1f1f' : 'white',
+                'plot_bgcolor': isDark ? '#1f1f1f' : 'white',
+                'font.color': isDark ? '#e0e0e0' : '#333',
+                'xaxis.gridcolor': isDark ? '#444' : '#eee',
+                'yaxis.gridcolor': isDark ? '#444' : '#eee'
+            });
+        }
+    });
     
+    // Swap OpenHands logos based on theme
+    const images = document.querySelectorAll('.js-plotly-plot image');
     images.forEach(img => {
         const href = img.getAttribute('href') || img.getAttribute('xlink:href') || '';
-        
-        // Check if this is an OpenHands logo
         if (href.includes('openhands=lightlogo')) {
-            // Light logo - show in light mode, hide in dark mode
             img.style.display = isDark ? 'none' : '';
         } else if (href.includes('openhands=darklogo')) {
-            // Dark logo - show in dark mode, hide in light mode
             img.style.display = isDark ? '' : 'none';
         }
     });
 }
 
-// Run on page load
 document.addEventListener('DOMContentLoaded', () => {
-    // Initial update after a short delay to let Plotly render
-    setTimeout(updateOpenHandsLogos, 500);
+    setTimeout(updateChartsForDarkMode, 500);
     
-    // Watch for dark mode changes using MutationObserver on body class
     const observer = new MutationObserver((mutations) => {
         mutations.forEach((mutation) => {
             if (mutation.attributeName === 'class') {
-                updateOpenHandsLogos();
+                updateChartsForDarkMode();
             }
         });
     });
-    
     observer.observe(document.body, { attributes: true });
     
-    // Also periodically check for new charts being added
-    setInterval(updateOpenHandsLogos, 1000);
+    setInterval(updateChartsForDarkMode, 1000);
 });
 </script>
 """
@@ -306,7 +310,7 @@ logger.info("Creating Gradio application")
 demo = gr.Blocks(
     theme=theme,
     css=final_css,
-    head=posthog_script + scroll_script + redirect_script + tooltip_script + logo_swap_script,
+    head=posthog_script + scroll_script + redirect_script + tooltip_script + dark_mode_script,
     title="OpenHands Index",
 )