light and dark mode

app.py

@@ -23,11 +23,13 @@ from ui import (
 
 # Visual tokens from https://www.pruna.ai/ and https://playground.pruna.ai/
 custom_css = """
-:root {
+:root, :host, .dark, :host(.dark) {
     --pruna-bg-primary: #120b1b;
     --pruna-bg-card: #171021;
     --pruna-bg-elevated: #1d1429;
+    --pruna-bg-header: #17101f;
     --pruna-border: rgba(74, 57, 98, 0.75);
+    --pruna-hairline: rgba(255, 255, 255, 0.08);
     --pruna-text-primary: #fafafa;
     --pruna-text-body: #d4d4d4;
     --pruna-text-muted: #a3a3a3;
@@ -36,6 +38,76 @@ custom_css = """
     --pruna-lavender: #d8b4fe;
     --pruna-link: #bf8bff;
     --pruna-font: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
+    --pruna-glow: radial-gradient(ellipse 60% 35% at 50% -5%, rgba(147, 52, 233, 0.18), transparent 55%);
+    --pruna-card-bg: color-mix(in oklab, #1d1429 92%, black 8%);
+    --pruna-card-shadow: 0 24px 55px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.04);
+    --pruna-callout-bg: color-mix(in oklab, #171021 82%, black 18%);
+    --pruna-menu-border: rgba(255, 255, 255, 0.08);
+    --pruna-menu-bg: rgba(255, 255, 255, 0.03);
+    --pruna-menu-hover-bg: rgba(255, 255, 255, 0.05);
+    --pruna-menu-hover-color: #e4e4e7;
+    --pruna-menu-selected-bg: rgba(143, 53, 255, 0.22);
+    --pruna-menu-selected-color: #ffffff;
+    --pruna-tab-hover: #e4e4e7;
+    --pruna-tab-selected: #ffffff;
+    --pruna-input-bg: rgba(255, 255, 255, 0.03);
+    --pruna-input-border: rgba(255, 255, 255, 0.08);
+    --pruna-focus-border: rgba(143, 53, 255, 0.45);
+    --pruna-focus-ring: 0 0 0 3px rgba(143, 53, 255, 0.16);
+    --pruna-table-hover: rgba(143, 53, 255, 0.16);
+    --pruna-table-hover-text: #ffffff;
+    --pruna-table-sticky: #17101f;
+    --pruna-table-sticky-hover: #2a1844;
+    --pruna-rank-bg: rgba(143, 53, 255, 0.22);
+    --pruna-rank-ring: 0 0 0 1px rgba(143, 53, 255, 0.45);
+    --pruna-score: #ddd6fe;
+    --pruna-accordion-bg: rgba(255, 255, 255, 0.02);
+    --pruna-accordion-border: rgba(216, 180, 254, 0.15);
+    --pruna-dropdown-hover: #2a1844;
+    color-scheme: dark;
+}
+
+.light, :host(.light) {
+    --pruna-bg-primary: #f6f3fa;
+    --pruna-bg-card: #ffffff;
+    --pruna-bg-elevated: #ffffff;
+    --pruna-bg-header: #f3eef8;
+    --pruna-border: rgba(126, 34, 206, 0.16);
+    --pruna-hairline: rgba(24, 24, 27, 0.08);
+    --pruna-text-primary: #18181b;
+    --pruna-text-body: #3f3f46;
+    --pruna-text-muted: #71717a;
+    --pruna-accent: #9334e9;
+    --pruna-accent-bright: #7c22ce;
+    --pruna-lavender: #7e22ce;
+    --pruna-link: #6d28d9;
+    --pruna-glow: radial-gradient(ellipse 60% 35% at 50% -5%, rgba(147, 52, 233, 0.10), transparent 55%);
+    --pruna-card-bg: #ffffff;
+    --pruna-card-shadow: 0 10px 28px rgba(88, 28, 135, 0.08);
+    --pruna-callout-bg: #ffffff;
+    --pruna-menu-border: var(--pruna-border);
+    --pruna-menu-bg: var(--pruna-bg-card);
+    --pruna-menu-hover-bg: rgba(147, 52, 233, 0.06);
+    --pruna-menu-hover-color: var(--pruna-text-primary);
+    --pruna-menu-selected-bg: rgba(147, 52, 233, 0.12);
+    --pruna-menu-selected-color: var(--pruna-accent-bright);
+    --pruna-tab-hover: var(--pruna-text-primary);
+    --pruna-tab-selected: var(--pruna-text-primary);
+    --pruna-input-bg: var(--pruna-bg-card);
+    --pruna-input-border: var(--pruna-border);
+    --pruna-focus-border: rgba(124, 34, 206, 0.45);
+    --pruna-focus-ring: 0 0 0 3px rgba(143, 53, 255, 0.16);
+    --pruna-table-hover: rgba(147, 52, 233, 0.08);
+    --pruna-table-hover-text: var(--pruna-text-primary);
+    --pruna-table-sticky: var(--pruna-bg-card);
+    --pruna-table-sticky-hover: #f3e8ff;
+    --pruna-rank-bg: rgba(147, 52, 233, 0.12);
+    --pruna-rank-ring: 0 0 0 1px rgba(147, 52, 233, 0.28);
+    --pruna-score: var(--pruna-accent-bright);
+    --pruna-accordion-bg: var(--pruna-bg-card);
+    --pruna-accordion-border: var(--pruna-border);
+    --pruna-dropdown-hover: #f3e8ff;
+    color-scheme: light;
 }
 
 html, body, .gradio-container, .main {
@@ -46,8 +118,7 @@ html, body, .gradio-container, .main {
 
 /* Subtle depth — not a marketing-site hero glow */
 body, .gradio-container {
-    background-image:
-        radial-gradient(ellipse 60% 35% at 50% -5%, rgba(147, 52, 233, 0.18), transparent 55%) !important;
+    background-image: var(--pruna-glow) !important;
     background-attachment: fixed !important;
 }
 
@@ -75,14 +146,74 @@ body, .gradio-container {
     overflow: visible !important;
 }
 .app-header {
+    position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
     margin: 8px 0 16px;
-    padding: 8px 0 0;
+    padding: 8px 48px 0;
     text-align: center;
 }
+.app-header .theme-toggle,
+button.theme-toggle {
+    position: absolute;
+    top: 8px;
+    right: 0;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    width: 36px !important;
+    height: 36px !important;
+    min-width: 36px !important;
+    min-height: 36px !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    border: 1px solid var(--pruna-menu-border) !important;
+    border-radius: 10px !important;
+    background: var(--pruna-menu-bg) !important;
+    color: var(--pruna-text-muted) !important;
+    box-shadow: none !important;
+    appearance: none !important;
+    -webkit-appearance: none !important;
+    box-sizing: border-box !important;
+    font: inherit !important;
+    line-height: 0 !important;
+    cursor: pointer;
+    z-index: 6;
+}
+.app-header .theme-toggle:hover,
+button.theme-toggle:hover {
+    color: var(--pruna-menu-hover-color) !important;
+    background: var(--pruna-menu-hover-bg) !important;
+    border-color: var(--pruna-menu-border) !important;
+    box-shadow: none !important;
+}
+.app-header .theme-toggle:focus,
+button.theme-toggle:focus {
+    outline: none !important;
+}
+.app-header .theme-toggle:focus-visible,
+button.theme-toggle:focus-visible {
+    color: var(--pruna-menu-hover-color) !important;
+    background: var(--pruna-menu-hover-bg) !important;
+    border-color: var(--pruna-focus-border) !important;
+    box-shadow: var(--pruna-focus-ring) !important;
+}
+.app-header .theme-toggle svg,
+button.theme-toggle svg {
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+}
+.app-header .theme-toggle .theme-icon-sun,
+button.theme-toggle .theme-icon-sun { display: block !important; }
+.app-header .theme-toggle .theme-icon-moon,
+button.theme-toggle .theme-icon-moon { display: none !important; }
+.app-header .theme-toggle[data-mode="light"] .theme-icon-sun,
+button.theme-toggle[data-mode="light"] .theme-icon-sun { display: none !important; }
+.app-header .theme-toggle[data-mode="light"] .theme-icon-moon,
+button.theme-toggle[data-mode="light"] .theme-icon-moon { display: block !important; }
 .app-header-brand {
     display: inline-flex !important;
     flex-direction: row;
@@ -120,7 +251,7 @@ body, .gradio-container {
     gap: 2px;
 }
 .main-tabs .tab-container::after {
-    background: rgba(255, 255, 255, 0.08) !important;
+    background: var(--pruna-hairline) !important;
 }
 .main-tabs .tab-container > button {
     font-family: var(--pruna-font) !important;
@@ -137,12 +268,12 @@ body, .gradio-container {
     height: auto !important;
 }
 .main-tabs .tab-container > button:hover:not(.selected) {
-    color: #e4e4e7 !important;
+    color: var(--pruna-tab-hover) !important;
     background: transparent !important;
 }
 .main-tabs .tab-container > button.selected,
 .main-tabs .tab-container > button[aria-selected="true"] {
-    color: #ffffff !important;
+    color: var(--pruna-tab-selected) !important;
     background: transparent !important;
 }
 .main-tabs .tab-container > button.selected::after,
@@ -211,9 +342,9 @@ body, .gradio-container {
     gap: 4px !important;
     width: 100%;
     padding: 4px !important;
-    border: 1px solid rgba(255, 255, 255, 0.08) !important;
+    border: 1px solid var(--pruna-menu-border) !important;
     border-radius: 12px !important;
-    background: rgba(255, 255, 255, 0.03) !important;
+    background: var(--pruna-menu-bg) !important;
 }
 .benchmark-view-menu label {
     display: flex !important;
@@ -233,12 +364,12 @@ body, .gradio-container {
     cursor: pointer;
 }
 .benchmark-view-menu label:hover {
-    color: #e4e4e7 !important;
-    background: rgba(255, 255, 255, 0.05) !important;
+    color: var(--pruna-menu-hover-color) !important;
+    background: var(--pruna-menu-hover-bg) !important;
 }
 .benchmark-view-menu label.selected {
-    color: #ffffff !important;
-    background: rgba(143, 53, 255, 0.22) !important;
+    color: var(--pruna-menu-selected-color) !important;
+    background: var(--pruna-menu-selected-bg) !important;
 }
 .benchmark-view-menu input[type="radio"] {
     position: absolute !important;
@@ -279,8 +410,8 @@ body, .gradio-container {
     padding: 18px 20px !important;
     border: 1px solid var(--pruna-border) !important;
     border-radius: 16px !important;
-    background: color-mix(in oklab, var(--pruna-bg-elevated) 92%, black 8%) !important;
-    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.04) !important;
+    background: var(--pruna-card-bg) !important;
+    box-shadow: var(--pruna-card-shadow) !important;
 }
 .benchmark-card-col:hover {
     border-color: color-mix(in srgb, var(--pruna-accent) 50%, transparent) !important;
@@ -313,8 +444,8 @@ body, .gradio-container {
 .compare-prompt-block {
     border: 1px solid var(--pruna-border) !important;
     border-radius: 16px !important;
-    background: color-mix(in oklab, var(--pruna-bg-elevated) 92%, black 8%) !important;
-    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.04) !important;
+    background: var(--pruna-card-bg) !important;
+    box-shadow: var(--pruna-card-shadow) !important;
 }
 
 /* Page footer — flat community strip + quiet citation accordion */
@@ -335,7 +466,7 @@ body, .gradio-container {
 .page-footer {
     margin: 32px 0 16px;
     padding: 20px 0 0;
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    border-top: 1px solid var(--pruna-hairline);
 }
 .page-footer h3 {
     margin: 0 0 10px !important;
@@ -343,7 +474,7 @@ body, .gradio-container {
     font-weight: 600 !important;
     letter-spacing: -0.015em !important;
     text-transform: none !important;
-    color: #ffffff !important;
+    color: var(--pruna-text-primary) !important;
 }
 .community-footer-links {
     display: flex;
@@ -367,9 +498,9 @@ body, .gradio-container {
 }
 .citation-accordion,
 .citation-accordion.block {
-    border: 1px solid rgba(216, 180, 254, 0.15) !important;
+    border: 1px solid var(--pruna-accordion-border) !important;
     border-radius: 10px !important;
-    background: rgba(255, 255, 255, 0.02) !important;
+    background: var(--pruna-accordion-bg) !important;
     box-shadow: none !important;
     overflow: hidden !important;
 }
@@ -381,16 +512,16 @@ body, .gradio-container {
     padding: 11px 14px !important;
     font-size: 0.92rem !important;
     font-weight: 500 !important;
-    color: #e4e4e7 !important;
+    color: var(--pruna-text-primary) !important;
     letter-spacing: -0.01em !important;
 }
 .citation-accordion > .label-wrap:hover,
 .citation-accordion .label-wrap:hover {
-    background: rgba(255, 255, 255, 0.04) !important;
+    background: var(--pruna-menu-hover-bg) !important;
 }
 .citation-accordion > .label-wrap span,
 .citation-accordion .label-wrap span {
-    color: #e4e4e7 !important;
+    color: var(--pruna-text-primary) !important;
     font-size: 0.92rem !important;
     font-weight: 500 !important;
 }
@@ -410,7 +541,7 @@ body, .gradio-container {
 }
 .citation-accordion .wrap,
 .citation-accordion > .wrap {
-    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
+    border-top: 1px solid var(--pruna-hairline) !important;
     padding: 4px 14px 12px !important;
     background: transparent !important;
 }
@@ -454,7 +585,7 @@ body, .gradio-container {
 }
 .home-callouts > div {
     padding: 14px 16px;
-    background: color-mix(in oklab, var(--pruna-bg-card) 82%, black 18%) !important;
+    background: var(--pruna-callout-bg) !important;
     box-shadow: none !important;
 }
 .home-callouts span {
@@ -522,7 +653,7 @@ body, .gradio-container {
     font-weight: 600 !important;
     letter-spacing: -0.01em;
     line-height: 1.3 !important;
-    color: #e4e4e7 !important;
+    color: var(--pruna-text-primary) !important;
 }
 .home-snap-emoji {
     display: inline-flex;
@@ -545,7 +676,7 @@ body, .gradio-container {
 }
 .home-snap-top {
     padding-top: 10px;
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    border-top: 1px solid var(--pruna-hairline);
     width: 100%;
 }
 .home-top-label {
@@ -563,7 +694,7 @@ body, .gradio-container {
     gap: 10px;
     align-items: center;
     padding: 8px 0;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    border-bottom: 1px solid var(--pruna-hairline);
     color: var(--pruna-text-primary) !important;
 }
 @media (max-width: 700px) {
@@ -592,14 +723,14 @@ body, .gradio-container {
     width: 28px;
     height: 28px;
     border-radius: 999px;
-    background: rgba(143, 53, 255, 0.22) !important;
+    background: var(--pruna-rank-bg) !important;
     color: var(--pruna-lavender) !important;
     font-weight: 700;
     font-size: 13px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    box-shadow: 0 0 0 1px rgba(143, 53, 255, 0.45);
+    box-shadow: var(--pruna-rank-ring);
 }
 .home-model,
 .prose .home-model {
@@ -610,7 +741,7 @@ body, .gradio-container {
 .home-score,
 .prose .home-score {
     font-variant-numeric: tabular-nums;
-    color: #ddd6fe !important;
+    color: var(--pruna-score) !important;
     font-weight: 600;
 }
 .home-empty,
@@ -650,7 +781,7 @@ body, .gradio-container {
 .leaderboard-search label,
 .leaderboard-search .block-label,
 .leaderboard-search .block-label span {
-    color: #ffffff !important;
+    color: var(--pruna-text-primary) !important;
     font-size: 0.85rem !important;
     font-weight: 700 !important;
     letter-spacing: -0.01em !important;
@@ -661,9 +792,9 @@ body, .gradio-container {
     min-height: 40px !important;
     height: 40px !important;
     padding: 0 12px !important;
-    border: 1px solid rgba(255, 255, 255, 0.08) !important;
+    border: 1px solid var(--pruna-input-border) !important;
     border-radius: 10px !important;
-    background: rgba(255, 255, 255, 0.03) !important;
+    background: var(--pruna-input-bg) !important;
     box-shadow: none !important;
     color: var(--pruna-text-primary) !important;
     font-family: var(--pruna-font) !important;
@@ -682,17 +813,17 @@ body, .gradio-container {
 .leaderboard-search input:focus,
 .leaderboard-controls input:focus,
 .leaderboard-controls textarea:focus {
-    border-color: rgba(143, 53, 255, 0.45) !important;
+    border-color: var(--pruna-focus-border) !important;
     outline: none !important;
-    box-shadow: 0 0 0 3px rgba(143, 53, 255, 0.16) !important;
+    box-shadow: var(--pruna-focus-ring) !important;
 }
 .leaderboard-controls .wrap,
 .leaderboard-controls .wrap-inner,
 .leaderboard-controls .secondary-wrap {
     min-height: 40px !important;
-    border: 1px solid rgba(255, 255, 255, 0.08) !important;
+    border: 1px solid var(--pruna-input-border) !important;
     border-radius: 10px !important;
-    background: rgba(255, 255, 255, 0.03) !important;
+    background: var(--pruna-input-bg) !important;
     box-shadow: none !important;
 }
 .ranking-table-host,
@@ -711,9 +842,9 @@ body, .gradio-container {
     --block-border-width: 0 !important;
 }
 .ranking-table-scroll {
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid var(--pruna-menu-border);
     border-radius: 12px;
-    background: rgba(255, 255, 255, 0.03);
+    background: var(--pruna-menu-bg);
     box-shadow: none;
     max-height: min(70vh, 720px);
     overflow: auto;
@@ -752,7 +883,7 @@ body, .gradio-container {
     vertical-align: middle !important;
     padding: 11px 14px !important;
     border: 0 !important;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
+    border-bottom: 1px solid var(--pruna-hairline) !important;
     background: transparent !important;
     box-shadow: none !important;
     outline: none !important;
@@ -762,7 +893,7 @@ body, .gradio-container {
     position: sticky;
     top: 0;
     z-index: 3;
-    background: #17101f !important;
+    background: var(--pruna-bg-header) !important;
     color: var(--pruna-text-muted) !important;
     font-size: 11px !important;
     font-weight: 600 !important;
@@ -770,7 +901,7 @@ body, .gradio-container {
     text-align: left;
     text-transform: uppercase;
     white-space: nowrap;
-    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) !important;
+    box-shadow: 0 1px 0 var(--pruna-hairline) !important;
 }
 .ranking-table th.sortable-col { cursor: pointer; user-select: none; }
 .ranking-table th.sortable-col:hover { color: var(--pruna-lavender) !important; }
@@ -784,14 +915,14 @@ body, .gradio-container {
 .ranking-table th.sortable-col.sorted-desc::after { content: "▼"; }
 .ranking-table tbody tr:last-child td { border-bottom: 0 !important; }
 .ranking-table tbody tr:hover td {
-    background: rgba(143, 53, 255, 0.16) !important;
+    background: var(--pruna-table-hover) !important;
 }
 .ranking-table tbody tr:hover td,
 .ranking-table tbody tr:hover .rank,
 .ranking-table tbody tr:hover .metric-score,
 .ranking-table tbody tr:hover .text-cell,
 .ranking-table tbody tr:hover .model-cell strong,
-.ranking-table tbody tr:hover .model-cell span { color: #ffffff !important; }
+.ranking-table tbody tr:hover .model-cell span { color: var(--pruna-table-hover-text) !important; }
 .ranking-table .rank,
 .prose .ranking-table .rank {
     position: sticky;
@@ -803,7 +934,7 @@ body, .gradio-container {
     color: var(--pruna-lavender) !important;
     font-weight: 700 !important;
     text-align: center;
-    background: #17101f !important;
+    background: var(--pruna-table-sticky) !important;
 }
 .ranking-table th.rank,
 .prose .ranking-table th.rank {
@@ -811,6 +942,7 @@ body, .gradio-container {
     left: 0;
     z-index: 5;
     text-align: center;
+    background: var(--pruna-bg-header) !important;
 }
 .ranking-table .model-cell,
 .prose .ranking-table .model-cell {
@@ -819,17 +951,18 @@ body, .gradio-container {
     z-index: 1;
     min-width: 180px;
     max-width: 260px;
-    background: #17101f !important;
+    background: var(--pruna-table-sticky) !important;
 }
 .ranking-table th.model-cell,
 .prose .ranking-table th.model-cell {
     top: 0;
     left: 3.25rem;
     z-index: 5;
+    background: var(--pruna-bg-header) !important;
 }
 .ranking-table tbody tr:hover .rank,
 .ranking-table tbody tr:hover .model-cell {
-    background: #2a1844 !important;
+    background: var(--pruna-table-sticky-hover) !important;
 }
 .ranking-table .model-cell strong,
 .ranking-table .model-cell span { display: block; }
@@ -867,10 +1000,131 @@ body, .gradio-container {
 }
 
 .compare-samples-help { color: var(--pruna-text-body); margin-bottom: 8px; }
+.compare-controls {
+    align-items: flex-end !important;
+    gap: 12px !important;
+    margin-bottom: 16px;
+}
+.compare-controls > .block,
+.compare-controls .form,
+.compare-controls .block,
+.compare-controls .compare-models,
+.compare-controls .compare-prompt-count {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    --block-border-width: 0 !important;
+}
+.compare-controls label,
+.compare-controls span[data-testid="block-info"] {
+    display: block !important;
+    margin: 0 0 6px !important;
+    padding: 0 !important;
+    color: var(--pruna-text-muted) !important;
+    font-size: 0.8rem !important;
+    font-weight: 500 !important;
+    line-height: 1.2 !important;
+}
+.compare-controls .compare-models span[data-testid="block-info"] {
+    min-height: 1.15rem;
+}
+.compare-controls .compare-models {
+    flex: 4 1 0 !important;
+    min-width: 280px !important;
+}
+.compare-controls .compare-prompt-count {
+    flex: 1 1 180px !important;
+    max-width: 240px !important;
+}
+.compare-controls .compare-models .wrap-inner,
+.compare-controls .compare-models .wrap {
+    min-height: 40px !important;
+    height: 40px !important;
+    border: 1px solid var(--pruna-input-border) !important;
+    border-radius: 10px !important;
+    background: var(--pruna-input-bg) !important;
+    box-shadow: none !important;
+}
+.compare-controls .compare-prompt-count .wrap {
+    display: grid !important;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-rows: auto 40px;
+    gap: 6px 10px;
+    align-items: center;
+    width: 100%;
+    min-height: 0 !important;
+    height: auto !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+}
+.compare-controls .compare-prompt-count .head {
+    display: contents;
+    margin: 0 !important;
+}
+.compare-controls .compare-prompt-count .head label {
+    grid-column: 1 / -1;
+    grid-row: 1;
+}
+.compare-controls .compare-prompt-count .tab-like-container {
+    grid-column: 2;
+    grid-row: 2;
+    height: 40px !important;
+    min-height: 40px !important;
+    align-self: stretch;
+    border: 1px solid var(--pruna-input-border) !important;
+    border-radius: 10px !important;
+    background: var(--pruna-input-bg) !important;
+    overflow: hidden;
+}
+.compare-controls .compare-prompt-count .slider_input_container {
+    grid-column: 1;
+    grid-row: 2;
+    height: 40px !important;
+    min-height: 40px !important;
+    margin: 0 !important;
+    gap: 0 !important;
+}
+.compare-controls .compare-prompt-count .min_value,
+.compare-controls .compare-prompt-count .max_value {
+    display: none !important;
+}
+.compare-controls .compare-prompt-count input[type="range"] {
+    height: 40px !important;
+    min-width: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+.compare-controls .compare-prompt-count input[type="number"] {
+    height: 40px !important;
+    min-height: 40px !important;
+    min-width: 2.5rem !important;
+    margin: 0 !important;
+    padding: 0 8px !important;
+    line-height: 40px !important;
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+}
+.compare-controls .compare-shuffle,
+.compare-controls .compare-shuffle button {
+    height: 40px !important;
+    min-height: 40px !important;
+    margin: 0 !important;
+    padding: 0 14px !important;
+    border-radius: 10px !important;
+    align-self: flex-end !important;
+}
 .compare-prompt-block {
     margin: 0 0 22px;
     padding: 14px 16px;
-    background: color-mix(in oklab, var(--pruna-bg-card) 82%, black 18%) !important;
+    background: var(--pruna-callout-bg) !important;
 }
 .compare-prompt-meta {
     display: flex;
@@ -904,7 +1158,7 @@ body, .gradio-container {
     aspect-ratio: 1 / 1;
     object-fit: cover;
     border-radius: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--pruna-border);
     background: var(--pruna-bg-elevated);
 }
 .compare-empty {
@@ -935,7 +1189,7 @@ body, .gradio-container {
     font-weight: 700 !important;
     letter-spacing: -0.035em;
     line-height: 1 !important;
-    color: #ffffff !important;
+    color: var(--pruna-text-primary) !important;
 }
 .app-header-tagline,
 .prose .app-header-tagline,
@@ -956,7 +1210,7 @@ body, .gradio-container {
 .markdown h1, .md h1, .prose h1 {
     margin: 0 0 0.65rem !important;
     padding: 0 !important;
-    color: #ffffff !important;
+    color: var(--pruna-text-primary) !important;
     font-family: var(--pruna-font) !important;
     font-size: 1.5rem !important;
     font-weight: 700 !important;
@@ -968,7 +1222,7 @@ body, .gradio-container {
 .markdown h2, .md h2, .prose h2 {
     margin: 1.75rem 0 0.75rem !important;
     padding: 0 !important;
-    color: #ffffff !important;
+    color: var(--pruna-text-primary) !important;
     font-family: var(--pruna-font) !important;
     font-size: 1.25rem !important;
     font-weight: 600 !important;
@@ -980,7 +1234,7 @@ body, .gradio-container {
 .markdown h3, .md h3, .prose h3 {
     margin: 1.35rem 0 0.5rem !important;
     padding: 0 !important;
-    color: #f4f4f5 !important;
+    color: var(--pruna-text-primary) !important;
     font-family: var(--pruna-font) !important;
     font-size: 1.05rem !important;
     font-weight: 600 !important;
@@ -1027,7 +1281,7 @@ body, .gradio-container {
 .home-intro p,
 .home-intro .prose p,
 .gradio-container .home-intro p {
-    color: #e4e4e7 !important;
+    color: var(--pruna-text-body) !important;
     font-size: 1.08rem !important;
     font-weight: 400 !important;
     line-height: 1.65 !important;
@@ -1040,7 +1294,7 @@ body, .gradio-container {
     line-height: 1.5;
 }
 .markdown strong, .md strong, .prose strong {
-    color: #ffffff !important;
+    color: var(--pruna-text-primary) !important;
     font-weight: 600 !important;
 }
 
@@ -1052,7 +1306,7 @@ body, .gradio-container {
     font-weight: 600 !important;
     letter-spacing: -0.01em;
     line-height: 1.3;
-    color: #e4e4e7 !important;
+    color: var(--pruna-text-primary) !important;
 }
 .home-snap-blurb,
 .benchmark-card-blurb {
@@ -1071,7 +1325,7 @@ body, .gradio-container {
     text-transform: uppercase !important;
 }
 .home-callouts strong {
-    color: #ffffff !important;
+    color: var(--pruna-text-primary) !important;
     font-size: 1.15rem !important;
     font-weight: 600 !important;
 }
@@ -1112,7 +1366,7 @@ footer, .footer { display: none !important; }
 /* Search label lives in a Gradio BlockTitle span with its own font-weight */
 .leaderboard-search span[data-testid="block-info"],
 .leaderboard-search label > span {
-    color: #ffffff !important;
+    color: var(--pruna-text-primary) !important;
     font-size: 0.95rem !important;
     font-weight: 700 !important;
     letter-spacing: -0.015em !important;
@@ -1122,11 +1376,49 @@ footer, .footer { display: none !important; }
     font-weight: 600 !important;
 }
 .leaderboard-search input::placeholder {
-    color: #d4d4d4 !important;
+    color: var(--pruna-text-muted) !important;
     font-size: 0.95rem !important;
     font-weight: 600 !important;
     opacity: 1 !important;
 }
+
+.pareto-help {
+    color: var(--pruna-text-muted) !important;
+    font-size: 0.95rem;
+}
+.pareto-help-emphasis {
+    color: var(--pruna-text-primary) !important;
+    font-size: 1rem;
+}
+
+.options,
+ul.options,
+.dropdown-arrow-inner {
+    background: var(--pruna-bg-card) !important;
+    color: var(--pruna-text-primary) !important;
+    border-color: var(--pruna-border) !important;
+}
+.options .item,
+.options li {
+    color: var(--pruna-text-primary) !important;
+}
+.options .item:hover,
+.options li:hover,
+.options .item.selected {
+    background: var(--pruna-dropdown-hover) !important;
+    color: var(--pruna-text-primary) !important;
+}
+input[type="range"] {
+    accent-color: var(--pruna-accent);
+}
+.pareto-plot,
+.pareto-plot.block,
+.pareto-plot .plotly,
+.pareto-plot .js-plotly-plot,
+.pareto-plot .plot-container {
+    background: transparent !important;
+    border-color: var(--pruna-border) !important;
+}
 """
 
 theme = gr.themes.Base(
@@ -1148,49 +1440,49 @@ theme = gr.themes.Base(
     font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"],
     font_mono=[gr.themes.GoogleFont("IBM Plex Mono"), "ui-monospace", "monospace"],
 ).set(
-    body_background_fill="#120b1b",
+    body_background_fill="#f6f3fa",
     body_background_fill_dark="#120b1b",
-    body_text_color="#fafafa",
+    body_text_color="#18181b",
     body_text_color_dark="#fafafa",
-    body_text_color_subdued="#a3a3a3",
+    body_text_color_subdued="#71717a",
     body_text_color_subdued_dark="#a3a3a3",
-    background_fill_primary="#120b1b",
+    background_fill_primary="#f6f3fa",
     background_fill_primary_dark="#120b1b",
-    background_fill_secondary="#171021",
+    background_fill_secondary="#ffffff",
     background_fill_secondary_dark="#171021",
-    block_background_fill="#1d1429",
+    block_background_fill="#ffffff",
     block_background_fill_dark="#1d1429",
-    block_border_color="#4a3962bf",
+    block_border_color="#e4d7f2",
     block_border_color_dark="#4a3962bf",
-    block_label_text_color="#a3a3a3",
+    block_label_text_color="#71717a",
     block_label_text_color_dark="#a3a3a3",
-    block_title_text_color="#fafafa",
+    block_title_text_color="#18181b",
     block_title_text_color_dark="#fafafa",
-    border_color_primary="#4a3962bf",
+    border_color_primary="#e4d7f2",
     border_color_primary_dark="#4a3962bf",
     button_primary_background_fill="#9334e9",
     button_primary_background_fill_dark="#9334e9",
-    button_primary_background_fill_hover="#8f35ff",
+    button_primary_background_fill_hover="#7c22ce",
     button_primary_background_fill_hover_dark="#8f35ff",
     button_primary_text_color="#ffffff",
     button_primary_text_color_dark="#ffffff",
-    button_secondary_background_fill="#ffffff05",
+    button_secondary_background_fill="#ffffff",
     button_secondary_background_fill_dark="#ffffff05",
-    button_secondary_background_fill_hover="rgba(147, 52, 233, 0.10)",
+    button_secondary_background_fill_hover="#f3e8ff",
     button_secondary_background_fill_hover_dark="rgba(147, 52, 233, 0.10)",
-    button_secondary_text_color="#fafafa",
+    button_secondary_text_color="#18181b",
     button_secondary_text_color_dark="#fafafa",
-    button_secondary_border_color="#d8b4fe26",
+    button_secondary_border_color="#e4d7f2",
     button_secondary_border_color_dark="#d8b4fe26",
-    input_background_fill="#171021",
+    input_background_fill="#ffffff",
     input_background_fill_dark="#171021",
-    input_border_color="#4a3962bf",
+    input_border_color="#e4d7f2",
     input_border_color_dark="#4a3962bf",
-    input_placeholder_color="#a3a3a3",
+    input_placeholder_color="#71717a",
     input_placeholder_color_dark="#a3a3a3",
-    link_text_color="#bf8bff",
+    link_text_color="#6d28d9",
     link_text_color_dark="#bf8bff",
-    link_text_color_hover="#d2a8ff",
+    link_text_color_hover="#7c22ce",
     link_text_color_hover_dark="#d2a8ff",
     shadow_drop="none",
     shadow_drop_lg="none",
@@ -1530,10 +1822,163 @@ benchmarks = [
 
 
 custom_head = """
+<script>
+(function () {
+  var mode = "dark";
+  try {
+    var stored = localStorage.getItem("inferbench-theme");
+    if (stored === "light" || stored === "dark") mode = stored;
+    else {
+      var param = new URLSearchParams(location.search).get("__theme");
+      if (param === "light" || param === "dark") mode = param;
+    }
+  } catch (e) {}
+  document.documentElement.classList.toggle("dark", mode === "dark");
+  document.documentElement.dataset.theme = mode;
+})();
+</script>
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
 <script>
+(() => {
+  const STORAGE_KEY = "inferbench-theme";
+  const PLOT_LAYOUT = {
+    dark: {
+      paper_bgcolor: "#171021",
+      plot_bgcolor: "#1d1429",
+      "font.color": "#d4d4d4",
+      "legend.font.color": "#d4d4d4",
+      "xaxis.gridcolor": "rgba(74, 57, 98, 0.55)",
+      "xaxis.color": "#d4d4d4",
+      "xaxis.title.font.color": "#fafafa",
+      "xaxis.tickfont.color": "#a3a3a3",
+      "yaxis.gridcolor": "rgba(74, 57, 98, 0.55)",
+      "yaxis.color": "#d4d4d4",
+      "yaxis.title.font.color": "#fafafa",
+      "yaxis.tickfont.color": "#a3a3a3",
+    },
+    light: {
+      paper_bgcolor: "#f6f3fa",
+      plot_bgcolor: "#ffffff",
+      "font.color": "#3f3f46",
+      "legend.font.color": "#3f3f46",
+      "xaxis.gridcolor": "rgba(126, 34, 206, 0.12)",
+      "xaxis.color": "#3f3f46",
+      "xaxis.title.font.color": "#18181b",
+      "xaxis.tickfont.color": "#71717a",
+      "yaxis.gridcolor": "rgba(126, 34, 206, 0.12)",
+      "yaxis.color": "#3f3f46",
+      "yaxis.title.font.color": "#18181b",
+      "yaxis.tickfont.color": "#71717a",
+    },
+  };
+
+  const currentMode = () => {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (stored === "light" || stored === "dark") return stored;
+    } catch (e) {}
+    const param = new URLSearchParams(location.search).get("__theme");
+    if (param === "light" || param === "dark") return param;
+    return "dark";
+  };
+
+  const queryAll = (selector) => {
+    const found = [...document.querySelectorAll(selector)];
+    document.querySelectorAll("gradio-app").forEach((app) => {
+      if (app.shadowRoot) found.push(...app.shadowRoot.querySelectorAll(selector));
+    });
+    return found;
+  };
+
+  const restylePlots = (mode) => {
+    const layout = PLOT_LAYOUT[mode];
+    if (!layout || typeof Plotly === "undefined") return;
+    queryAll(".js-plotly-plot").forEach((gd) => {
+      try { Plotly.relayout(gd, layout); } catch (e) {}
+    });
+  };
+
+  const applyMode = (mode, persist) => {
+    const dark = mode === "dark";
+    const targets = [
+      document.documentElement,
+      document.body,
+      ...queryAll(".gradio-container"),
+      ...document.querySelectorAll("gradio-app"),
+    ].filter(Boolean);
+    targets.forEach((el) => {
+      el.classList.toggle("dark", dark);
+      el.classList.toggle("light", !dark);
+    });
+    document.documentElement.dataset.theme = mode;
+    const label = dark ? "Switch to light mode" : "Switch to dark mode";
+    queryAll(".theme-toggle").forEach((btn) => {
+      btn.setAttribute("data-mode", mode);
+      btn.setAttribute("aria-label", label);
+      btn.setAttribute("title", label);
+    });
+    if (persist) {
+      try { localStorage.setItem(STORAGE_KEY, mode); } catch (e) {}
+      try {
+        const url = new URL(location.href);
+        url.searchParams.set("__theme", mode);
+        history.replaceState(null, "", url);
+      } catch (e) {}
+    }
+    restylePlots(mode);
+  };
+
+  applyMode(currentMode(), false);
+
+  document.addEventListener("click", (event) => {
+    const path = typeof event.composedPath === "function" ? event.composedPath() : [event.target];
+    const btn = path.find((el) => el.classList && el.classList.contains("theme-toggle"));
+    if (!btn) return;
+    event.preventDefault();
+    const next = currentMode() === "dark" ? "light" : "dark";
+    applyMode(next, true);
+  });
+
+  const sync = () => applyMode(currentMode(), false);
+  document.addEventListener("DOMContentLoaded", sync);
+  window.addEventListener("load", () => {
+    sync();
+    setTimeout(sync, 80);
+    setTimeout(sync, 400);
+  });
+
+  const startObserver = () => {
+    if (!document.body || window.__inferbenchThemeObserver) return;
+    window.__inferbenchThemeObserver = true;
+    const onMutations = (mutations) => {
+      const mode = currentMode();
+      const isDark = document.documentElement.classList.contains("dark");
+      const added = mutations.flatMap((mutation) => [...mutation.addedNodes]).filter((node) => node.nodeType === 1);
+      const hasContainer = added.some((node) => (
+        node.classList?.contains("gradio-container") ||
+        node.querySelector?.(".gradio-container, .theme-toggle")
+      ));
+      if ((mode === "dark") !== isDark || hasContainer) applyMode(mode, false);
+      const hasPlot = added.some((node) => (
+        node.classList?.contains("js-plotly-plot") ||
+        node.querySelector?.(".js-plotly-plot")
+      ));
+      if (hasPlot) restylePlots(mode);
+    };
+    new MutationObserver(onMutations).observe(document.body, { childList: true, subtree: true });
+    document.querySelectorAll("gradio-app").forEach((app) => {
+      if (app.shadowRoot) {
+        new MutationObserver(onMutations).observe(app.shadowRoot, { childList: true, subtree: true });
+      }
+    });
+  };
+  if (document.body) startObserver();
+  else document.addEventListener("DOMContentLoaded", startObserver);
+})();
+</script>
+<script>
 (() => {
   if (window.__inferbenchLeaderboardSortBound) return;
   window.__inferbenchLeaderboardSortBound = true;

ui.py

@@ -113,6 +113,15 @@ def render_header():
     gr.HTML(
         f"""
         <header class="app-header">
+          <button type="button" class="theme-toggle" data-mode="dark" aria-label="Switch to light mode" title="Switch to light mode">
+            <svg class="theme-icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <circle cx="12" cy="12" r="4"></circle>
+              <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"></path>
+            </svg>
+            <svg class="theme-icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M21 14.5A8.5 8.5 0 1 1 9.5 3 7 7 0 0 0 21 14.5z"></path>
+            </svg>
+          </button>
           <div class="app-header-brand">
             <img class="app-header-logo" src="{_MASCOT_DATA_URI}" alt="" />
             <h1>InferBench</h1>
@@ -642,21 +651,23 @@ def render_compare_samples(benchmark):
     gr.Markdown(
         f"""
         <p class="compare-samples-help">
-        Pick up to <strong>{MAX_COMPARE_MODELS}</strong> models, then browse shared
-        prompts side by side. Images come from the public generation URLs for this
-        benchmark.
+        Pick up to <strong>{MAX_COMPARE_MODELS}</strong> models to compare side by
+        side. Images come from the public generation URLs for this benchmark.
+        Prompts to show chooses how many shared prompts appear (1–{MAX_COMPARE_PROMPTS}).
         </p>
         """
     )
-    with gr.Row(elem_classes="leaderboard-controls"):
+    with gr.Row(elem_classes="compare-controls"):
         model_picker = gr.Dropdown(
             choices=models,
             value=default_models,
             multiselect=True,
             max_choices=MAX_COMPARE_MODELS,
             label="Models",
-            info=f"Select 1–{MAX_COMPARE_MODELS} models to compare",
-            scale=3,
+            container=False,
+            scale=4,
+            min_width=280,
+            elem_classes="compare-models",
         )
         prompt_count = gr.Slider(
             minimum=1,
@@ -664,9 +675,18 @@ def render_compare_samples(benchmark):
             value=DEFAULT_COMPARE_PROMPTS,
             step=1,
             label="Prompts to show",
+            container=False,
+            show_reset_button=False,
+            scale=1,
+            min_width=180,
+            elem_classes="compare-prompt-count",
+        )
+        shuffle_button = gr.Button(
+            "Shuffle prompts",
             scale=1,
+            min_width=140,
+            elem_classes="compare-shuffle",
         )
-        shuffle_button = gr.Button("Shuffle prompts", scale=1)
 
     gallery = gr.HTML(
         value=_build_compare_samples_html(
@@ -1066,11 +1086,11 @@ def render_benchmark_graphs(benchmark):
     if price_figures or time_figures:
         gr.Markdown(
             "### Pareto frontiers\n\n"
-            "<span style='color:#a3a3a3;font-size:0.95rem;'>"
+            "<span class='pareto-help'>"
             "Green = on the frontier (lower cost or time at the same or better score). "
             "Lavender = below the frontier."
             "</span><br/>"
-            "<strong style='color:#ffffff;font-size:1rem;'>Hover a point to see which model it is.</strong>"
+            "<strong class='pareto-help-emphasis'>Hover a point to see which model it is.</strong>"
         )
         with gr.Row(equal_height=False):
             with gr.Column(scale=1, min_width=320):