Use separate logos for light and dark mode in plots

- Added get_openhands_logo_images() that returns both light and dark logos
- Light mode uses openhands_logo_color_forwhite.png
- Dark mode uses openhands_logo_color_forblack.png
- CSS shows/hides appropriate logo based on .dark class
- Dark mode logo doesn't get inverted (uses actual dark logo file)

content.py

@@ -1149,6 +1149,30 @@ h3 .header-link-icon {
     filter: invert(1) hue-rotate(180deg);
 }
 
+/* OpenHands logo visibility - light mode logo hidden in dark mode */
+.dark .js-plotly-plot image[href*="openhands=lightlogo"],
+.dark .js-plotly-plot image[xlink\\:href*="openhands=lightlogo"] {
+    display: none !important;
+}
+
+/* OpenHands logo visibility - dark mode logo uses the actual dark logo file, no inversion needed */
+.dark .js-plotly-plot image[href*="openhands=darklogo"],
+.dark .js-plotly-plot image[xlink\\:href*="openhands=darklogo"] {
+    filter: none !important;
+}
+
+/* Light mode: hide the dark logo */
+.js-plotly-plot image[href*="openhands=darklogo"],
+.js-plotly-plot image[xlink\\:href*="openhands=darklogo"] {
+    display: none;
+}
+
+/* Light mode: show the light logo (this is the default, but being explicit) */
+.dark .js-plotly-plot image[href*="openhands=darklogo"],
+.dark .js-plotly-plot image[xlink\\:href*="openhands=darklogo"] {
+    display: block !important;
+}
+
 /* Modebar icons need re-inversion */
 .dark .js-plotly-plot .modebar {
     filter: invert(1) hue-rotate(180deg);

leaderboard_transformer.py

@@ -62,19 +62,21 @@ URL_ANNOTATION = dict(
 )
 
 
-def get_openhands_logo_image():
-    """Get the OpenHands logo as a Plotly image dict for chart branding.
+def get_openhands_logo_images():
+    """Get both light and dark mode OpenHands logos as Plotly image dicts.
     
-    Uses a special MIME type parameter (;openhands=logo) to allow CSS targeting.
-    This enables CSS attribute selectors to identify this specific image.
+    Returns two images - one for light mode (forwhite) and one for dark mode (forblack).
+    CSS is used to show/hide the appropriate logo based on the current mode.
     """
+    images = []
+    
+    # Light mode logo (visible in light mode, hidden in dark mode)
     if os.path.exists(OPENHANDS_LOGO_PATH_LIGHT):
         try:
             with open(OPENHANDS_LOGO_PATH_LIGHT, "rb") as f:
                 logo_data = base64.b64encode(f.read()).decode('utf-8')
-            # Add openhands=logo parameter to MIME type for CSS targeting
-            return dict(
-                source=f"data:image/png;openhands=logo;base64,{logo_data}",
+            images.append(dict(
+                source=f"data:image/png;openhands=lightlogo;base64,{logo_data}",
                 xref="paper",
                 yref="paper",
                 x=0,
@@ -83,19 +85,39 @@ def get_openhands_logo_image():
                 sizey=0.15,
                 xanchor="left",
                 yanchor="bottom",
-            )
+            ))
+        except Exception:
+            pass
+    
+    # Dark mode logo (hidden in light mode, visible in dark mode)
+    if os.path.exists(OPENHANDS_LOGO_PATH_DARK):
+        try:
+            with open(OPENHANDS_LOGO_PATH_DARK, "rb") as f:
+                logo_data = base64.b64encode(f.read()).decode('utf-8')
+            images.append(dict(
+                source=f"data:image/png;openhands=darklogo;base64,{logo_data}",
+                xref="paper",
+                yref="paper",
+                x=0,
+                y=-0.15,
+                sizex=0.15,
+                sizey=0.15,
+                xanchor="left",
+                yanchor="bottom",
+            ))
         except Exception:
             pass
-    return None
+    
+    return images
 
 
 def add_branding_to_figure(fig: go.Figure) -> go.Figure:
     """Add OpenHands logo and URL to a Plotly figure."""
-    # Add logo image
-    logo_image = get_openhands_logo_image()
-    if logo_image:
+    # Add both light and dark mode logo images
+    logo_images = get_openhands_logo_images()
+    if logo_images:
         existing_images = list(fig.layout.images) if fig.layout.images else []
-        existing_images.append(logo_image)
+        existing_images.extend(logo_images)
         fig.update_layout(images=existing_images)
     
     # Add URL annotation

visualizations.py

@@ -63,19 +63,21 @@ URL_ANNOTATION = dict(
 )
 
 
-def get_openhands_logo_image():
-    """Get the OpenHands logo as a Plotly image dict for chart branding.
+def get_openhands_logo_images():
+    """Get both light and dark mode OpenHands logos as Plotly image dicts.
     
-    Uses a special MIME type parameter (;openhands=logo) to allow CSS targeting.
-    This enables CSS attribute selectors to identify this specific image.
+    Returns two images - one for light mode (forwhite) and one for dark mode (forblack).
+    CSS is used to show/hide the appropriate logo based on the current mode.
     """
+    images = []
+    
+    # Light mode logo (visible in light mode, hidden in dark mode)
     if os.path.exists(OPENHANDS_LOGO_PATH_LIGHT):
         try:
             with open(OPENHANDS_LOGO_PATH_LIGHT, "rb") as f:
                 logo_data = base64.b64encode(f.read()).decode('utf-8')
-            # Add openhands=logo parameter to MIME type for CSS targeting
-            return dict(
-                source=f"data:image/png;openhands=logo;base64,{logo_data}",
+            images.append(dict(
+                source=f"data:image/png;openhands=lightlogo;base64,{logo_data}",
                 xref="paper",
                 yref="paper",
                 x=0,
@@ -84,19 +86,39 @@ def get_openhands_logo_image():
                 sizey=0.15,
                 xanchor="left",
                 yanchor="bottom",
-            )
+            ))
         except Exception:
             pass
-    return None
+    
+    # Dark mode logo (hidden in light mode, visible in dark mode)
+    if os.path.exists(OPENHANDS_LOGO_PATH_DARK):
+        try:
+            with open(OPENHANDS_LOGO_PATH_DARK, "rb") as f:
+                logo_data = base64.b64encode(f.read()).decode('utf-8')
+            images.append(dict(
+                source=f"data:image/png;openhands=darklogo;base64,{logo_data}",
+                xref="paper",
+                yref="paper",
+                x=0,
+                y=-0.15,
+                sizex=0.15,
+                sizey=0.15,
+                xanchor="left",
+                yanchor="bottom",
+            ))
+        except Exception:
+            pass
+    
+    return images
 
 
 def add_branding_to_figure(fig: go.Figure) -> go.Figure:
     """Add OpenHands logo and URL to a Plotly figure."""
-    # Add logo image
-    logo_image = get_openhands_logo_image()
-    if logo_image:
+    # Add both light and dark mode logo images
+    logo_images = get_openhands_logo_images()
+    if logo_images:
         existing_images = list(fig.layout.images) if fig.layout.images else []
-        existing_images.append(logo_image)
+        existing_images.extend(logo_images)
         fig.update_layout(images=existing_images)
     
     # Add URL annotation