Enable dark mode for Plotly charts with logo circle backgrounds

- Add CSS filter-based dark mode support for all Plotly plots
- Invert chart colors when Gradio dark mode is active
- Re-invert company logo images to display correctly in dark mode
- Add light gray circular glow behind company logos for visibility
- Re-invert OpenHands branding logo and modebar icons

Co-authored-by: openhands <openhands@all-hands.dev>

content.py

@@ -1134,4 +1134,31 @@ h3 .header-link-icon {
         font-size: 10px;
     }
 }
+
+/* ====== Dark Mode Plotly Charts ====== */
+/* Use filter-based inversion for reliable dark mode support */
+/* This inverts the entire chart and then re-inverts specific elements */
+
+.dark .js-plotly-plot {
+    filter: invert(0.88) hue-rotate(180deg);
+}
+
+/* Re-invert company logo images so they display correctly */
+/* Also add a light gray circular glow behind them for visibility */
+.dark .js-plotly-plot .layer-above image,
+.dark .js-plotly-plot .imagelayer image {
+    filter: invert(1) hue-rotate(180deg) 
+            drop-shadow(0 0 12px rgba(160, 165, 180, 0.95)) 
+            drop-shadow(0 0 8px rgba(160, 165, 180, 0.9));
+}
+
+/* Re-invert the OpenHands logo at bottom so it displays correctly */
+.dark .js-plotly-plot image[href*="openhands"] {
+    filter: invert(1) hue-rotate(180deg);
+}
+
+/* Modebar icons need re-inversion */
+.dark .js-plotly-plot .modebar {
+    filter: invert(1) hue-rotate(180deg);
+}
 """