update app [theme]

app.py

@@ -45,27 +45,29 @@ from typing import Iterable
 from gradio.themes import Soft
 from gradio.themes.utils import colors, fonts, sizes
 
-colors.orange_red = colors.Color(
-    name="orange_red",
-    c50="#FFF0E5",
-    c100="#FFE0CC",
-    c200="#FFC299",
-    c300="#FFA366",
-    c400="#FF8533",
-    c500="#FF4500",
-    c600="#E63E00",
-    c700="#CC3700",
-    c800="#B33000",
-    c900="#992900",
-    c950="#802200",
+# ── Steel-Blue palette ──────────────────────────────────────────────
+colors.steel_blue = colors.Color(
+    name="steel_blue",
+    c50="#EBF3F8",
+    c100="#D3E5F0",
+    c200="#A8CCE1",
+    c300="#7DB3D2",
+    c400="#529AC3",
+    c500="#4682B4",
+    c600="#3E72A0",
+    c700="#36638C",
+    c800="#2E5378",
+    c900="#264364",
+    c950="#1E3450",
 )
 
-class OrangeRedTheme(Soft):
+
+class SteelBlueTheme(Soft):
     def __init__(
         self,
         *,
         primary_hue: colors.Color | str = colors.gray,
-        secondary_hue: colors.Color | str = colors.orange_red,
+        secondary_hue: colors.Color | str = colors.steel_blue,
         neutral_hue: colors.Color | str = colors.slate,
         text_size: sizes.Size | str = sizes.text_lg,
         font: fonts.Font | str | Iterable[fonts.Font | str] = (
@@ -92,8 +94,8 @@ class OrangeRedTheme(Soft):
             button_primary_text_color_hover="white",
             button_primary_background_fill="linear-gradient(90deg, *secondary_500, *secondary_600)",
             button_primary_background_fill_hover="linear-gradient(90deg, *secondary_600, *secondary_700)",
-            button_primary_background_fill_dark="linear-gradient(90deg, *secondary_600, *secondary_700)",
-            button_primary_background_fill_hover_dark="linear-gradient(90deg, *secondary_500, *secondary_600)",
+            button_primary_background_fill_dark="linear-gradient(90deg, *secondary_600, *secondary_800)",
+            button_primary_background_fill_hover_dark="linear-gradient(90deg, *secondary_500, *secondary_500)",
             button_secondary_text_color="black",
             button_secondary_text_color_hover="white",
             button_secondary_background_fill="linear-gradient(90deg, *primary_300, *primary_300)",
@@ -112,7 +114,7 @@ class OrangeRedTheme(Soft):
         )
 
 
-orange_red_theme = OrangeRedTheme()
+steel_blue_theme = SteelBlueTheme()
 
 SVG_CUBE = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"/></svg>'
 
@@ -173,13 +175,13 @@ footer { display: none !important; }
 
 /* ── App Header ── */
 .app-header {
-    background: linear-gradient(135deg, #4A1800 0%, #802200 30%, #CC3700 70%, #FF4500 100%);
+    background: linear-gradient(135deg, #1E3450 0%, #264364 30%, #3E72A0 70%, #4682B4 100%);
     border-radius: 16px;
     padding: 32px 40px;
     margin-bottom: 24px;
     position: relative;
     overflow: hidden;
-    box-shadow: 0 8px 32px rgba(74, 24, 0, 0.25);
+    box-shadow: 0 8px 32px rgba(30, 52, 80, 0.35);
 }
 .app-header::before {
     content: '';
@@ -198,7 +200,7 @@ footer { display: none !important; }
     left: -10%;
     width: 300px;
     height: 300px;
-    background: radial-gradient(circle, rgba(255, 69, 0, 0.15) 0%, transparent 70%);
+    background: radial-gradient(circle, rgba(70, 130, 180, 0.15) 0%, transparent 70%);
     border-radius: 50%;
 }
 .header-content {
@@ -220,16 +222,25 @@ footer { display: none !important; }
     backdrop-filter: blur(8px);
     border: 1px solid rgba(255, 255, 255, 0.15);
 }
-.header-icon-wrap svg {
+/* ── Force header SVGs white in ALL modes ── */
+.header-icon-wrap svg,
+.app-header svg {
     width: 36px;
     height: 36px;
-    color: rgba(255, 255, 255, 0.9);
+    color: #ffffff !important;
+    stroke: #ffffff !important;
+}
+.meta-badge svg {
+    width: 14px !important;
+    height: 14px !important;
+    color: #ffffff !important;
+    stroke: #ffffff !important;
 }
 .header-text h1 {
     font-family: 'Outfit', sans-serif;
     font-size: 2rem;
     font-weight: 700;
-    color: #fff;
+    color: #fff !important;
     margin: 0 0 8px 0;
     letter-spacing: -0.02em;
     line-height: 1.2;
@@ -245,7 +256,7 @@ footer { display: none !important; }
     align-items: center;
     gap: 6px;
     background: rgba(255, 255, 255, 0.12);
-    color: rgba(255, 255, 255, 0.9);
+    color: rgba(255, 255, 255, 0.9) !important;
     padding: 4px 12px;
     border-radius: 20px;
     font-family: 'IBM Plex Mono', monospace;
@@ -254,10 +265,6 @@ footer { display: none !important; }
     border: 1px solid rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(4px);
 }
-.meta-badge svg {
-    width: 14px;
-    height: 14px;
-}
 .meta-sep {
     width: 4px;
     height: 4px;
@@ -266,7 +273,7 @@ footer { display: none !important; }
     flex-shrink: 0;
 }
 .meta-cap {
-    color: rgba(255, 255, 255, 0.65);
+    color: rgba(255, 255, 255, 0.65) !important;
     font-size: 0.85rem;
     font-weight: 400;
 }
@@ -322,7 +329,7 @@ footer { display: none !important; }
 }
 .primary:hover {
     transform: translateY(-2px) !important;
-    box-shadow: 0 6px 20px rgba(255, 69, 0, 0.3) !important;
+    box-shadow: 0 6px 20px rgba(70, 130, 180, 0.35) !important;
 }
 .primary:active { transform: translateY(0) !important; }
 
@@ -410,7 +417,7 @@ footer { display: none !important; }
 /* ── Accordion ── */
 .gradio-accordion {
     border-radius: 10px !important;
-    border: 1px solid rgba(255, 69, 0, 0.15) !important;
+    border: 1px solid rgba(70, 130, 180, 0.2) !important;
 }
 .gradio-accordion > .label-wrap { border-radius: 10px !important; }
 
@@ -421,18 +428,44 @@ label {
 }
 
 /* ── Slider ── */
-.gradio-slider input[type="range"] { accent-color: #FF4500 !important; }
+.gradio-slider input[type="range"] { accent-color: #4682B4 !important; }
 
 /* ── Scrollbar ── */
 ::-webkit-scrollbar { width: 8px; height: 8px; }
-::-webkit-scrollbar-track { background: rgba(255, 69, 0, 0.04); border-radius: 4px; }
+::-webkit-scrollbar-track { background: rgba(70, 130, 180, 0.06); border-radius: 4px; }
 ::-webkit-scrollbar-thumb {
-    background: linear-gradient(135deg, #FF4500, #CC3700);
+    background: linear-gradient(135deg, #4682B4, #3E72A0);
     border-radius: 4px;
 }
 ::-webkit-scrollbar-thumb:hover {
-    background: linear-gradient(135deg, #CC3700, #992900);
+    background: linear-gradient(135deg, #3E72A0, #2E5378);
+}
+
+/* ── Dark-mode overrides for header (keep text/SVG white) ── */
+@media (prefers-color-scheme: dark) {
+    .app-header {
+        background: linear-gradient(135deg, #1E3450 0%, #264364 30%, #3E72A0 70%, #4682B4 100%);
+    }
+    .header-text h1 { color: #fff !important; }
+    .header-icon-wrap svg,
+    .app-header svg,
+    .meta-badge svg {
+        color: #ffffff !important;
+        stroke: #ffffff !important;
+    }
+    .meta-badge { color: rgba(255, 255, 255, 0.9) !important; }
+    .meta-cap   { color: rgba(255, 255, 255, 0.65) !important; }
+}
+/* Also handle Gradio's own .dark class */
+.dark .header-text h1 { color: #fff !important; }
+.dark .header-icon-wrap svg,
+.dark .app-header svg,
+.dark .meta-badge svg {
+    color: #ffffff !important;
+    stroke: #ffffff !important;
 }
+.dark .meta-badge { color: rgba(255, 255, 255, 0.9) !important; }
+.dark .meta-cap   { color: rgba(255, 255, 255, 0.65) !important; }
 
 /* ── Responsive ── */
 @media (max-width: 768px) {
@@ -1358,4 +1391,4 @@ with gr.Blocks() as demo:
         outputs=[measure_image, measure_points_state],
     )
 
-    demo.queue(max_size=50).launch(css=CUSTOM_CSS, theme=orange_red_theme, show_error=True, share=True, ssr_mode=False)
+    demo.queue(max_size=50).launch(css=CUSTOM_CSS, theme=steel_blue_theme, show_error=True, share=True, ssr_mode=False, mcp_server=True)