Address chart styling feedback

app.py

@@ -65,114 +65,18 @@ API = HfApi(token=TOKEN)
 COLOR_BY_CHOICES = ["Model", "Harness"]
 COLOR_PALETTE_CHOICES = ["Citrus", "Okabe-Ito", "High contrast", "Rainbow"]
 DEFAULT_COLOR_PALETTE = "Citrus"
-
-
-APP_CSS = """
-:root,
-body,
-.gradio-container {
-    color-scheme: dark;
-    background: #15110F !important;
-    color: #F8FAFC !important;
-}
-
-.gradio-container,
-.main,
-.wrap,
-.contain,
-#component-0 {
-    background: #15110F !important;
-}
-
-.markdown-text,
-.markdown-text p,
-.markdown-text li,
-.markdown-text td,
-.markdown-text th,
-.gradio-container label,
-.gradio-container .prose,
-.gradio-container .prose * {
-    color: #E5E7EB !important;
-}
-
-.gradio-container h1,
-.gradio-container h2,
-.gradio-container h3,
-.gradio-container h4 {
-    color: #F8FAFC !important;
-}
-
-.gradio-container .block,
-.gradio-container .form,
-.gradio-container .panel,
-.gradio-container .tabitem,
-.gradio-container .tabs,
-.gradio-container .plot-container,
-.gradio-container .js-plotly-plot {
-    background: #27211E !important;
-    color: #F8FAFC !important;
-    border-color: rgba(248, 250, 252, 0.14) !important;
-}
-
-.gradio-container input,
-.gradio-container textarea,
-.gradio-container select,
-.gradio-container button,
-.gradio-container .wrap-inner {
-    color: #F8FAFC !important;
-}
-
-/* Radio/dropdown color controls need explicit contrast. Gradio's citrus theme can
-   otherwise produce light text on light inactive radio buttons. */
-.gradio-container .color-control label,
-.gradio-container .color-control label span,
-.gradio-container .color-control button,
-.gradio-container .color-control .wrap label span {
-    color: #F8FAFC !important;
-}
-
-.gradio-container .color-control label:not(:has(input:checked)),
-.gradio-container .color-control button:not([aria-pressed="true"]) {
-    background: #3B332F !important;
-    color: #F8FAFC !important;
-    border-color: rgba(248, 250, 252, 0.18) !important;
-}
-
-.gradio-container .color-control label:has(input:checked),
-.gradio-container .color-control label.selected,
-.gradio-container .color-control button.selected,
-.gradio-container .color-control button[aria-pressed="true"] {
-    background: #F59E0B !important;
-    color: #111827 !important;
-    border-color: #FBBF24 !important;
-}
-
-.gradio-container .color-control label:has(input:checked) span,
-.gradio-container .color-control label.selected span,
-.gradio-container .color-control button.selected,
-.gradio-container .color-control button[aria-pressed="true"] {
-    color: #111827 !important;
-}
-
-.gradio-container .color-control input[type="radio"] {
-    accent-color: #F59E0B;
-}
-
-/* Let Plotly consume the available card width instead of keeping a fixed SVG size. */
-.gradio-container .plot-container,
-.gradio-container .js-plotly-plot,
-.gradio-container .plotly,
-.gradio-container .svg-container,
-.gradio-container .main-svg {
-    width: 100% !important;
-    max-width: 100% !important;
-}
-
-.gradio-container .js-plotly-plot,
-.gradio-container .svg-container {
-    min-height: 520px !important;
-    height: clamp(520px, 58vh, 760px) !important;
-}
+PLOT_BACKGROUND_CHOICES = ["Dark", "White"]
+DEFAULT_PLOT_BACKGROUND = "Dark"
+FORCE_DARK_MODE_HEAD = """
+<script>
+(() => {
+  const url = new URL(window.location.href);
+  if (!url.searchParams.has("__theme")) {
+    url.searchParams.set("__theme", "dark");
+    window.location.replace(url.toString());
+  }
+})();
+</script>
 """
 
 
@@ -186,21 +90,33 @@ BENCHMARK_RUN_DF = get_benchmark_run_df()
 SCORE_VS_COST_DF = get_score_vs_cost_df()
 
 
-def render_leaderboard_benchmark_plot(benchmark_name, color_by, color_palette=DEFAULT_COLOR_PALETTE):
+def render_leaderboard_benchmark_plot(
+    benchmark_name,
+    color_by,
+    color_palette=DEFAULT_COLOR_PALETTE,
+    plot_background=DEFAULT_PLOT_BACKGROUND,
+):
     return create_leaderboard_benchmark_plot(
         BENCHMARK_RUN_DF,
         benchmark_name=benchmark_name,
         color_by=color_by,
         palette_name=color_palette,
+        background_name=plot_background,
     )
 
 
-def render_score_vs_cost_plot(benchmark_name, color_by, color_palette=DEFAULT_COLOR_PALETTE):
+def render_score_vs_cost_plot(
+    benchmark_name,
+    color_by,
+    color_palette=DEFAULT_COLOR_PALETTE,
+    plot_background=DEFAULT_PLOT_BACKGROUND,
+):
     return create_score_vs_cost_plot(
         SCORE_VS_COST_DF,
         benchmark_name=benchmark_name,
         color_by=color_by,
         palette_name=color_palette,
+        background_name=plot_background,
     )
 
 
@@ -273,7 +189,7 @@ def init_benchmark_runs(dataframe):
     )
 
 
-demo = gr.Blocks(theme="citrus", css=APP_CSS)
+demo = gr.Blocks(theme="citrus", head=FORCE_DARK_MODE_HEAD)
 with demo:
     gr.HTML(build_header_html(BENCHMARK_RUN_DF))
     gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text")
@@ -294,24 +210,35 @@ with demo:
                     label="Color palette",
                     elem_classes="color-control",
                 )
+                leaderboard_background = gr.Dropdown(
+                    choices=PLOT_BACKGROUND_CHOICES,
+                    value=DEFAULT_PLOT_BACKGROUND,
+                    label="Image background",
+                    elem_classes="color-control",
+                )
 
             leaderboard_plots = []
             for benchmark_name in BENCHMARK_NAMES:
                 gr.Markdown(f"#### {benchmark_name}")
                 plot = gr.Plot(
-                    value=render_leaderboard_benchmark_plot(benchmark_name, "Model", DEFAULT_COLOR_PALETTE),
+                    value=render_leaderboard_benchmark_plot(
+                        benchmark_name,
+                        "Model",
+                        DEFAULT_COLOR_PALETTE,
+                        DEFAULT_PLOT_BACKGROUND,
+                    ),
                     show_label=False,
                     elem_classes="responsive-plot",
                 )
                 leaderboard_plots.append((benchmark_name, plot))
 
             for benchmark_name, plot in leaderboard_plots:
-                for control in (leaderboard_color_by, leaderboard_palette):
+                for control in (leaderboard_color_by, leaderboard_palette, leaderboard_background):
                     control.change(
-                        fn=lambda color_by, palette, name=benchmark_name: render_leaderboard_benchmark_plot(
-                            name, color_by, palette
+                        fn=lambda color_by, palette, background, name=benchmark_name: render_leaderboard_benchmark_plot(
+                            name, color_by, palette, background
                         ),
-                        inputs=[leaderboard_color_by, leaderboard_palette],
+                        inputs=[leaderboard_color_by, leaderboard_palette, leaderboard_background],
                         outputs=plot,
                     )
 
@@ -334,24 +261,40 @@ with demo:
                     label="Color palette",
                     elem_classes="color-control",
                 )
+                cost_background = gr.Dropdown(
+                    choices=PLOT_BACKGROUND_CHOICES,
+                    value=DEFAULT_PLOT_BACKGROUND,
+                    label="Image background",
+                    elem_classes="color-control",
+                )
             score_vs_cost_plot = gr.Plot(
-                value=render_score_vs_cost_plot(DEFAULT_BENCHMARK, "Model", DEFAULT_COLOR_PALETTE),
+                value=render_score_vs_cost_plot(
+                    DEFAULT_BENCHMARK,
+                    "Model",
+                    DEFAULT_COLOR_PALETTE,
+                    DEFAULT_PLOT_BACKGROUND,
+                ),
                 show_label=False,
                 elem_classes="responsive-plot",
             )
             cost_benchmark.change(
                 fn=render_score_vs_cost_plot,
-                inputs=[cost_benchmark, cost_color_by, cost_palette],
+                inputs=[cost_benchmark, cost_color_by, cost_palette, cost_background],
                 outputs=score_vs_cost_plot,
             )
             cost_color_by.change(
                 fn=render_score_vs_cost_plot,
-                inputs=[cost_benchmark, cost_color_by, cost_palette],
+                inputs=[cost_benchmark, cost_color_by, cost_palette, cost_background],
                 outputs=score_vs_cost_plot,
             )
             cost_palette.change(
                 fn=render_score_vs_cost_plot,
-                inputs=[cost_benchmark, cost_color_by, cost_palette],
+                inputs=[cost_benchmark, cost_color_by, cost_palette, cost_background],
+                outputs=score_vs_cost_plot,
+            )
+            cost_background.change(
+                fn=render_score_vs_cost_plot,
+                inputs=[cost_benchmark, cost_color_by, cost_palette, cost_background],
                 outputs=score_vs_cost_plot,
             )
 

src/charts.py

@@ -10,16 +10,18 @@ from plotly.graph_objs._figure import Figure
 
 ColorBy = Literal["Model", "Harness"]
 PaletteName = Literal["Citrus", "Okabe-Ito", "High contrast", "Rainbow"]
+PlotBackground = Literal["Dark", "White"]
 DEFAULT_PALETTE: PaletteName = "Citrus"
+DEFAULT_BACKGROUND: PlotBackground = "Dark"
 
 # Separate categorical palettes for each grouping dimension.
 # Model and harness colors intentionally start from different hue families so
 # switching "Color by" remains visually obvious.
 MODEL_COLORS: dict[str, str] = {
-    "GPT 5.5 - high": "#F59E0B",  # amber
-    "Opus 4.8": "#84CC16",  # lime
+    "GPT 5.5 - high": "#F8FAFC",  # white
+    "Opus 4.8": "#FEF3C7",  # cream
     "RedHatAI/Qwen3.6-35B-A3B-NVFP4": "#F97316",  # orange
-    "Sonnet 4.6": "#22C55E",  # green
+    "Sonnet 4.6": "#DC2626",  # red
 }
 
 HARNESS_COLORS: dict[str, str] = {
@@ -33,16 +35,16 @@ HARNESS_COLORS: dict[str, str] = {
 }
 
 MODEL_FALLBACK_PALETTE = [
-    "#F59E0B",  # amber
-    "#84CC16",  # lime
-    "#F97316",  # orange
-    "#22C55E",  # green
-    "#EAB308",  # yellow
-    "#FB7185",  # rose
-    "#A3E635",  # light lime
-    "#FACC15",  # gold
-    "#F472B6",  # pink
-    "#2DD4BF",  # teal
+    "#F8FAFC",  # white
+    "#FEF3C7",  # cream
+    "#FACC15",  # yellow
+    "#FB923C",  # orange
+    "#DC2626",  # red
+    "#93C5FD",  # blue fallback
+    "#22C55E",  # green fallback
+    "#C084FC",  # violet fallback
+    "#F472B6",  # pink fallback
+    "#14B8A6",  # teal fallback
 ]
 
 HARNESS_FALLBACK_PALETTE = [
@@ -66,6 +68,30 @@ TEXT_MUTED = "#CBD5E1"
 GRID_COLOR = "rgba(248,250,252,0.14)"
 ZERO_LINE_COLOR = "rgba(248,250,252,0.24)"
 
+PLOT_BACKGROUNDS: dict[PlotBackground, dict[str, str]] = {
+    "Dark": {
+        "template": "plotly_dark",
+        "paper_bgcolor": DARK_CARD,
+        "plot_bgcolor": DARK_PLOT,
+        "text_primary": TEXT_PRIMARY,
+        "text_muted": TEXT_MUTED,
+        "grid_color": GRID_COLOR,
+        "zero_line_color": ZERO_LINE_COLOR,
+        "marker_line_color": DARK_PAPER,
+    },
+    "White": {
+        "template": "plotly_white",
+        "paper_bgcolor": "#FFFFFF",
+        "plot_bgcolor": "#FFFFFF",
+        "text_primary": "#0F172A",
+        "text_muted": "#475569",
+        "grid_color": "rgba(15,23,42,0.12)",
+        "zero_line_color": "rgba(15,23,42,0.25)",
+        "marker_line_color": "#334155",
+    },
+}
+
+
 def clean_markdown_link(value: object) -> str:
     """Return human-readable text from Markdown links used in leaderboard tables."""
     text = str(value).replace("<sup>*</sup>", "")
@@ -102,6 +128,18 @@ def normalize_palette_name(palette_name: str | None) -> PaletteName:
     return DEFAULT_PALETTE
 
 
+def normalize_background_name(background_name: str | None) -> PlotBackground:
+    if background_name == "Current":
+        return "Dark"
+    if background_name in PLOT_BACKGROUNDS:
+        return background_name  # type: ignore[return-value]
+    return DEFAULT_BACKGROUND
+
+
+def get_plot_background(background_name: str | None = DEFAULT_BACKGROUND) -> dict[str, str]:
+    return PLOT_BACKGROUNDS[normalize_background_name(background_name)]
+
+
 def stable_color(name: str, color_by: ColorBy, palette_name: str | None = DEFAULT_PALETTE) -> str:
     palette_key = normalize_palette_name(palette_name)
     palettes = MODEL_PALETTES if color_by == "Model" else HARNESS_PALETTES
@@ -158,7 +196,8 @@ def color_map_for(
     }
 
 
-def empty_figure(message: str) -> Figure:
+def empty_figure(message: str, background_name: str | None = DEFAULT_BACKGROUND) -> Figure:
+    theme = get_plot_background(background_name)
     fig = go.Figure()
     fig.add_annotation(
         text=message,
@@ -167,50 +206,52 @@ def empty_figure(message: str) -> Figure:
         y=0.5,
         xref="paper",
         yref="paper",
-        font={"size": 14, "color": TEXT_MUTED},
+        font={"size": 14, "color": theme["text_muted"]},
     )
-    return apply_plot_theme(fig)
+    return apply_plot_theme(fig, background_name)
 
 
-def apply_plot_theme(fig: Figure) -> Figure:
+def apply_plot_theme(fig: Figure, background_name: str | None = DEFAULT_BACKGROUND) -> Figure:
+    theme = get_plot_background(background_name)
     fig.update_layout(
-        template="plotly_dark",
+        template=theme["template"],
         autosize=True,
-        paper_bgcolor="rgba(0,0,0,0)",
-        plot_bgcolor=DARK_PLOT,
-        font={"color": TEXT_PRIMARY},
-        title={"font": {"color": TEXT_PRIMARY}},
-        margin={"t": 64, "b": 72, "l": 72, "r": 36},
+        paper_bgcolor=theme["paper_bgcolor"],
+        plot_bgcolor=theme["plot_bgcolor"],
+        font={"color": theme["text_primary"]},
+        title={"font": {"color": theme["text_primary"]}},
+        margin={"t": 0, "b": 0, "l": 0, "r": 0},
         legend={
             "orientation": "h",
-            "yanchor": "bottom",
-            "y": 1.02,
+            "yanchor": "top",
+            "y": 1,
             "xanchor": "center",
             "x": 0.5,
-            "font": {"color": TEXT_MUTED},
+            "font": {"color": theme["text_muted"]},
         },
     )
     # Remove fixed dimensions so Gradio/Plotly can size to the browser/container.
     fig.update_layout(width=None, height=None)
     fig.update_xaxes(
-        color=TEXT_MUTED,
-        gridcolor=GRID_COLOR,
-        zerolinecolor=ZERO_LINE_COLOR,
-        linecolor=GRID_COLOR,
-        title_font={"color": TEXT_MUTED},
-        tickfont={"color": TEXT_MUTED},
+        automargin=True,
+        color=theme["text_muted"],
+        gridcolor=theme["grid_color"],
+        zerolinecolor=theme["zero_line_color"],
+        linecolor=theme["grid_color"],
+        title_font={"color": theme["text_muted"]},
+        tickfont={"color": theme["text_muted"]},
     )
     fig.update_yaxes(
-        color=TEXT_MUTED,
-        gridcolor=GRID_COLOR,
-        zerolinecolor=ZERO_LINE_COLOR,
-        linecolor=GRID_COLOR,
-        title_font={"color": TEXT_MUTED},
-        tickfont={"color": TEXT_MUTED},
+        automargin=True,
+        color=theme["text_muted"],
+        gridcolor=theme["grid_color"],
+        zerolinecolor=theme["zero_line_color"],
+        linecolor=theme["grid_color"],
+        title_font={"color": theme["text_muted"]},
+        tickfont={"color": theme["text_muted"]},
     )
     return fig
 
-
 def prepare_benchmark_run_plot_df(dataframe: pd.DataFrame) -> pd.DataFrame:
     plot_df = dataframe.copy()
     plot_df["Model Label"] = plot_df["Model"].map(clean_markdown_link)
@@ -226,19 +267,21 @@ def create_leaderboard_benchmark_plot(
     benchmark_name: str,
     color_by: ColorBy = "Model",
     palette_name: str | None = DEFAULT_PALETTE,
+    background_name: str | None = DEFAULT_BACKGROUND,
 ) -> Figure:
     if dataframe is None or dataframe.empty:
-        return empty_figure("No benchmark data available.")
+        return empty_figure("No benchmark data available.", background_name)
 
     plot_df = prepare_benchmark_run_plot_df(dataframe)
     plot_df = plot_df[plot_df["Benchmark Label"] == benchmark_name].dropna(subset=["Score"])
     plot_df = plot_df.sort_values("Score", ascending=False)
 
     if plot_df.empty:
-        return empty_figure(f"No results available for {benchmark_name}.")
+        return empty_figure(f"No results available for {benchmark_name}.", background_name)
 
     color_source = "Model Label" if color_by == "Model" else "Harness Label"
     colors = color_map_for(plot_df[color_source], color_by, palette_name)
+    theme = get_plot_background(background_name)
     fig = go.Figure()
 
     for group, group_df in plot_df.groupby(color_source, sort=True):
@@ -247,7 +290,10 @@ def create_leaderboard_benchmark_plot(
                 x=group_df["Run Label"],
                 y=group_df["Score"],
                 name=str(group),
-                marker={"color": colors[str(group)]},
+                marker={
+                    "color": colors[str(group)],
+                    "line": {"width": 1, "color": theme["marker_line_color"]},
+                },
                 text=group_df["Score"].map(lambda score: f"{score:.1f}"),
                 textposition="outside",
                 customdata=group_df[["Model Label", "Harness Label", "Score"]],
@@ -261,14 +307,14 @@ def create_leaderboard_benchmark_plot(
         )
 
     fig.update_layout(
-        title={"text": benchmark_name, "font": {"size": 18}},
+        title=None,
         xaxis={"title": "Model / Harness", "categoryorder": "array", "categoryarray": plot_df["Run Label"].tolist()},
         yaxis={"title": "Score (%)", "range": [0, 105]},
         legend_title_text=color_by,
         bargap=0.28,
     )
     fig.update_xaxes(tickangle=-28)
-    return apply_plot_theme(fig)
+    return apply_plot_theme(fig, background_name)
 
 
 def create_score_vs_cost_plot(
@@ -276,12 +322,13 @@ def create_score_vs_cost_plot(
     benchmark_name: str | None,
     color_by: ColorBy = "Model",
     palette_name: str | None = DEFAULT_PALETTE,
+    background_name: str | None = DEFAULT_BACKGROUND,
 ) -> Figure:
     if dataframe is None or dataframe.empty:
-        return empty_figure("No cost data available.")
+        return empty_figure("No cost data available.", background_name)
 
     if not benchmark_name:
-        return empty_figure("Select a benchmark to view cost data.")
+        return empty_figure("Select a benchmark to view cost data.", background_name)
 
     plot_df = dataframe.copy()
     plot_df = plot_df[plot_df["Benchmark"] == benchmark_name]
@@ -290,9 +337,10 @@ def create_score_vs_cost_plot(
     plot_df = plot_df.dropna(subset=["Score", "Cost Per Task (USD)"])
 
     if plot_df.empty:
-        return empty_figure(f"No cost data available for {benchmark_name}.")
+        return empty_figure(f"No cost data available for {benchmark_name}.", background_name)
 
     colors = color_map_for(plot_df[color_by], color_by, palette_name)
+    theme = get_plot_background(background_name)
     fig = go.Figure()
 
     for group, group_df in plot_df.groupby(color_by, sort=True):
@@ -307,7 +355,7 @@ def create_score_vs_cost_plot(
                 marker={
                     "size": 15,
                     "color": colors[str(group)],
-                    "line": {"width": 1, "color": DARK_PAPER},
+                    "line": {"width": 1, "color": theme["marker_line_color"]},
                 },
                 customdata=group_df[["Model", "Harness", "Benchmark", "Score", "Cost Per Task (USD)"]],
                 hovertemplate=(
@@ -322,9 +370,9 @@ def create_score_vs_cost_plot(
         )
 
     fig.update_layout(
-        title={"text": f"{benchmark_name}: Cost vs Performance", "font": {"size": 18}},
+        title=None,
         xaxis={"title": "Cost per task (USD)", "tickprefix": "$", "tickformat": ".2f"},
         yaxis={"title": "Score (%)", "range": [0, 105]},
         legend_title_text=color_by,
     )
-    return apply_plot_theme(fig)
+    return apply_plot_theme(fig, background_name)