Use JavaScript to swap OpenHands logos based on dark mode

- Added logo_swap_script that uses MutationObserver to detect dark mode changes
- JavaScript directly sets display:none on the appropriate logo
- Simplified CSS to just remove filters from OpenHands logos
- More reliable than CSS attribute selectors on Plotly images

app.py

@@ -134,6 +134,51 @@ const tooltipInterval = setInterval(() => {
 }, 200);
 </script>
 """
+
+# JavaScript to swap OpenHands logos based on dark mode
+logo_swap_script = """
+<script>
+function updateOpenHandsLogos() {
+    const isDark = document.body.classList.contains('dark');
+    
+    // Find all Plotly chart images
+    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);
+    
+    // Watch for dark mode changes using MutationObserver on body class
+    const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            if (mutation.attributeName === 'class') {
+                updateOpenHandsLogos();
+            }
+        });
+    });
+    
+    observer.observe(document.body, { attributes: true });
+    
+    // Also periodically check for new charts being added
+    setInterval(updateOpenHandsLogos, 1000);
+});
+</script>
+"""
 # --- Theme Definition ---
 # Color scheme aligned with OpenHands brand (from openhands-ui/tokens.css)
 # Primary: Yellow (#FFE165), Neutral: Grey scale, Accents: Green (#BCFF8C), Red (#FF684E)
@@ -261,7 +306,7 @@ logger.info("Creating Gradio application")
 demo = gr.Blocks(
     theme=theme,
     css=final_css,
-    head=posthog_script + scroll_script + redirect_script + tooltip_script,
+    head=posthog_script + scroll_script + redirect_script + tooltip_script + logo_swap_script,
     title="OpenHands Index",
 )
 

content.py

@@ -1144,32 +1144,17 @@ h3 .header-link-icon {
 }
 
 /* Re-invert all images so they display correctly (no glow) */
-/* Exclude OpenHands logos which are handled separately */
+/* Exclude OpenHands logos which are handled by JavaScript */
 .dark .js-plotly-plot .layer-above image:not([href*="openhands="]):not([xlink\\:href*="openhands="]),
 .dark .js-plotly-plot .imagelayer image:not([href*="openhands="]):not([xlink\\:href*="openhands="]) {
     filter: invert(1) hue-rotate(180deg);
 }
 
-/* Light mode: hide the dark logo, show the light logo */
-.js-plotly-plot image[href*="openhands=darklogo"],
-.js-plotly-plot image[xlink\\:href*="openhands=darklogo"] {
-    display: none;
-}
-
-/* Dark mode: hide the light logo */
-.dark .js-plotly-plot .layer-above image[href*="openhands=lightlogo"],
-.dark .js-plotly-plot .layer-above image[xlink\\:href*="openhands=lightlogo"],
-.dark .js-plotly-plot .imagelayer image[href*="openhands=lightlogo"],
-.dark .js-plotly-plot .imagelayer image[xlink\\:href*="openhands=lightlogo"] {
-    display: none !important;
-}
-
-/* Dark mode: show the dark logo without any filter (it's already designed for dark backgrounds) */
-.dark .js-plotly-plot .layer-above image[href*="openhands=darklogo"],
-.dark .js-plotly-plot .layer-above image[xlink\\:href*="openhands=darklogo"],
-.dark .js-plotly-plot .imagelayer image[href*="openhands=darklogo"],
-.dark .js-plotly-plot .imagelayer image[xlink\\:href*="openhands=darklogo"] {
-    display: block !important;
+/* OpenHands logos: JavaScript handles visibility, CSS just removes any filters */
+.dark .js-plotly-plot .layer-above image[href*="openhands="],
+.dark .js-plotly-plot .layer-above image[xlink\\:href*="openhands="],
+.dark .js-plotly-plot .imagelayer image[href*="openhands="],
+.dark .js-plotly-plot .imagelayer image[xlink\\:href*="openhands="] {
     filter: none !important;
 }