Fix dark mode modebar styling - transparent background with light gray icons

- Make modebar, modebar-container, modebar-group, and modebar-btn backgrounds transparent
- Style modebar icons to match the light gray text color (neutral-400)
- Add hover state with slightly lighter color for better UX

This fixes the ugly gray background that appeared when hovering over Plotly figures in dark mode.

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

content.py

@@ -1018,8 +1018,32 @@ h3 .header-link-icon {
     filter: invert(0.88) hue-rotate(180deg);
 }
 
-/* Re-invert the modebar so icons display correctly */
+/* Re-invert the modebar so icons display correctly, with transparent background */
 .dark .js-plotly-plot .modebar {
     filter: invert(1) hue-rotate(180deg);
+    background: transparent !important;
+}
+
+.dark .js-plotly-plot .modebar-container {
+    background: transparent !important;
+}
+
+.dark .js-plotly-plot .modebar-group {
+    background: transparent !important;
+}
+
+.dark .js-plotly-plot .modebar-btn {
+    background: transparent !important;
+}
+
+/* Style modebar icons to match the light gray text color (after re-inversion) */
+/* Since we apply invert(1), we need to use the inverted color to get the desired result */
+/* Target: #82889B (neutral-400). After invert(1) hue-rotate(180deg), use #7d7764 */
+.dark .js-plotly-plot .modebar-btn path {
+    fill: #7d7764 !important;
+}
+
+.dark .js-plotly-plot .modebar-btn:hover path {
+    fill: #4a4533 !important;
 }
 """