added dark theme support

S2FApp/.streamlit/config.toml

@@ -6,12 +6,36 @@ enableXsrfProtection = false
 # [client]
 # toolbarMode = "minimal"
 
+# Shared accent. Light and dark palettes live in [theme.light] / [theme.dark]
+# (Streamlit ≥1.51). With both set, the app follows the system setting and
+# can still be overridden from the app menu (Settings).
 [theme]
 primaryColor = "#0d9488"
+font = "sans serif"
+
+[theme.light]
 backgroundColor = "#ffffff"
 secondaryBackgroundColor = "#f8fafc"
 textColor = "#1e293b"
-font = "sans serif"
+borderColor = "#e2e8f0"
+
+[theme.light.sidebar]
+backgroundColor = "#f8fafc"
+secondaryBackgroundColor = "#ffffff"
+textColor = "#1e293b"
+
+[theme.dark]
+backgroundColor = "#0b1220"
+secondaryBackgroundColor = "#111827"
+textColor = "#e2e8f0"
+borderColor = "#334155"
+primaryColor = "#2dd4bf"
+
+[theme.dark.sidebar]
+backgroundColor = "#111827"
+secondaryBackgroundColor = "#0b1220"
+textColor = "#e2e8f0"
+primaryColor = "#2dd4bf"
 
 [logger]
 level = "error"

S2FApp/requirements-docker.txt

@@ -4,7 +4,7 @@ numpy>=1.20.0,<2.0
 opencv-python>=4.5.0
 scipy>=1.7.0
 scikit-image>=0.19.0,<0.26
-streamlit>=1.29.0
+streamlit>=1.51.0
 streamlit-drawable-canvas-fix>=0.9.8
 matplotlib>=3.5.0
 Pillow>=9.0.0

S2FApp/requirements.txt

@@ -5,7 +5,7 @@ numpy>=1.20.0
 opencv-python>=4.5.0
 scipy>=1.7.0
 scikit-image>=0.19.0
-streamlit>=1.29.0
+streamlit>=1.51.0
 streamlit-drawable-canvas-fix>=0.9.8
 matplotlib>=3.5.0
 Pillow>=9.0.0

S2FApp/static/s2f_styles.css

@@ -6,13 +6,43 @@
     --s2f-primary-rgb: 13, 148, 136;
     /* Space for Streamlit’s fixed top toolbar (Deploy / menu). Set when header exists (see below). */
     --s2f-streamlit-header-offset: 0px;
-    /* Sidebar grouped blocks: faint surface, no heavy chrome */
-    --s2f-sidebar-panel-bg: rgba(255, 255, 255, 0.42);
-    --s2f-sidebar-panel-border: rgba(203, 213, 225, 0.34);
     /* Match Streamlit’s sidebar horizontal padding so panels can full-bleed the track */
     --s2f-sidebar-inline-inset: 1rem;
     --s2f-sidebar-width: 360px;
 }
+/*
+ * Surfaces follow the active Streamlit theme. light-dark() uses the color-scheme
+ * Streamlit sets from the system setting (or from Settings → Light / Dark).
+ */
+.stApp {
+    --s2f-page-bg: light-dark(#fafbfc, #0b1220);
+    --s2f-page-dot: light-dark(rgba(148, 163, 184, 0.12), rgba(148, 163, 184, 0.18));
+    --s2f-glow: light-dark(rgba(13, 148, 136, 0.06), rgba(45, 212, 191, 0.08));
+    --s2f-glow-2: light-dark(rgba(13, 148, 136, 0.04), rgba(45, 212, 191, 0.05));
+    --s2f-sidebar-start: light-dark(#f8fafc, #111827);
+    --s2f-sidebar-end: light-dark(#f1f5f9, #0f172a);
+    --s2f-sidebar-rule: light-dark(rgba(203, 213, 225, 0.25), rgba(51, 65, 85, 0.55));
+    --s2f-sidebar-panel-bg: light-dark(rgba(255, 255, 255, 0.42), rgba(15, 23, 42, 0.55));
+    --s2f-sidebar-panel-border: light-dark(rgba(203, 213, 225, 0.34), rgba(51, 65, 85, 0.75));
+    --s2f-text: light-dark(#1e293b, #e2e8f0);
+    --s2f-text-secondary: light-dark(#334155, #cbd5e1);
+    --s2f-text-muted: light-dark(#64748b, #94a3b8);
+    --s2f-text-faint: light-dark(#475569, #94a3b8);
+    --s2f-accent-text: light-dark(#0f766e, #5eead4);
+    --s2f-surface: light-dark(#ffffff, #111827);
+    --s2f-surface-2: light-dark(#f8fafc, #1e293b);
+    --s2f-surface-3: light-dark(#f1f5f9, #1e293b);
+    --s2f-border: light-dark(#e2e8f0, #334155);
+    --s2f-border-strong: light-dark(#cbd5e1, #475569);
+    --s2f-badge-bg: light-dark(#e2e8f0, #334155);
+    --s2f-code-bg: light-dark(#f1f5f9, #1e293b);
+    --s2f-footer-bg: light-dark(#f1f5f9, #0f172a);
+    --s2f-success-start: light-dark(#ecfdf5, #064e3b);
+    --s2f-success-end: light-dark(#d1fae5, #065f46);
+    --s2f-success-text: light-dark(#065f46, #d1fae5);
+    --s2f-shadow: light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.35));
+    --s2f-shadow-hover: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.45));
+}
 /* Streamlit renders a fixed header; without this offset, the sidebar and first main block sit underneath it. */
 .stApp:has(header[data-testid="stHeader"]) {
     --s2f-streamlit-header-offset: 2rem;
@@ -42,9 +72,9 @@ html, body {
     overflow: hidden !important;
     display: flex !important;
     flex-direction: column !important;
-    background-color: #fafbfc !important;
+    background-color: var(--s2f-page-bg) !important;
     background-image:
-        radial-gradient(circle at 1px 1px, rgba(148, 163, 184, 0.12) 1px, transparent 0);
+        radial-gradient(circle at 1px 1px, var(--s2f-page-dot) 1px, transparent 0);
     background-size: 28px 28px !important;
     background-position: 0 0, 0 0 !important;
 }
@@ -64,8 +94,8 @@ html, body {
     right: 0;
     bottom: 0;
     background:
-        radial-gradient(ellipse 80% 50% at 70% -20%, rgba(var(--s2f-primary-rgb), 0.06) 0%, transparent 50%),
-        radial-gradient(ellipse 60% 40% at 0% 100%, rgba(var(--s2f-primary-rgb), 0.04) 0%, transparent 50%);
+        radial-gradient(ellipse 80% 50% at 70% -20%, var(--s2f-glow) 0%, transparent 50%),
+        radial-gradient(ellipse 60% 40% at 0% 100%, var(--s2f-glow-2) 0%, transparent 50%);
     pointer-events: none;
     z-index: 0;
 }
@@ -143,16 +173,16 @@ section[data-testid="stSidebar"] {
     overflow-y: auto !important;
     scrollbar-gutter: stable !important;
     background:
-        linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%),
+        linear-gradient(180deg, var(--s2f-sidebar-start) 0%, var(--s2f-sidebar-end) 100%),
         /* Subtle vertical rhythm */
         repeating-linear-gradient(
             90deg,
             transparent,
             transparent 89px,
-            rgba(203, 213, 225, 0.25) 89px,
-            rgba(203, 213, 225, 0.25) 90px
+            var(--s2f-sidebar-rule) 89px,
+            var(--s2f-sidebar-rule) 90px
         ) !important;
-    border-right: 1px solid #e2e8f0 !important;
+    border-right: 1px solid var(--s2f-border) !important;
 }
 @media (max-width: 768px) {
     section[data-testid="stSidebar"] { width: 100% !important; max-width: 100% !important; }
@@ -165,7 +195,7 @@ section[data-testid="stSidebar"] [data-testid="stWidgetLabel"],
 section[data-testid="stSidebar"] [data-testid="stWidgetLabel"] p {
     font-size: 0.9rem !important;
     font-weight: 500 !important;
-    color: #334155 !important;
+    color: var(--s2f-text-secondary) !important;
 }
 .sidebar-brand {
     display: flex;
@@ -177,7 +207,7 @@ section[data-testid="stSidebar"] [data-testid="stWidgetLabel"] p {
 .sidebar-brand .brand-text {
     font-size: 1.1rem;
     font-weight: 700;
-    color: var(--s2f-primary-dark);
+    color: var(--s2f-accent-text);
     letter-spacing: -0.01em;
 }
 
@@ -213,8 +243,8 @@ section[data-testid="stSidebar"] .st-key-s2f_grp_force > div {
 
 /* === Metric cards === */
 [data-testid="stMetric"] {
-    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
-    border: 1px solid #e2e8f0;
+    background: linear-gradient(145deg, var(--s2f-surface) 0%, var(--s2f-surface-2) 100%);
+    border: 1px solid var(--s2f-border);
     border-radius: 12px;
     padding: 0.85rem 1rem !important;
     box-shadow: 0 1px 4px rgba(0,0,0,0.06);
@@ -227,14 +257,14 @@ section[data-testid="stSidebar"] .st-key-s2f_grp_force > div {
 [data-testid="stMetric"] label {
     font-size: 0.75rem !important;
     font-weight: 600 !important;
-    color: #64748b !important;
+    color: var(--s2f-text-muted) !important;
     text-transform: uppercase;
     letter-spacing: 0.04em;
 }
 [data-testid="stMetric"] [data-testid="stMetricValue"] {
     font-size: 1.25rem !important;
     font-weight: 700 !important;
-    color: var(--s2f-primary-dark) !important;
+    color: var(--s2f-accent-text) !important;
 }
 
 /* === Buttons === */
@@ -255,7 +285,7 @@ section[data-testid="stSidebar"] .st-key-s2f_grp_force > div {
 .stButton > button:not([kind="primary"]) {
     border-radius: 10px !important;
     font-weight: 500 !important;
-    border: 1px solid #cbd5e1 !important;
+    border: 1px solid var(--s2f-border-strong) !important;
     transition: all 0.2s ease !important;
 }
 .stButton > button:not([kind="primary"]):hover {
@@ -275,8 +305,8 @@ section[data-testid="stSidebar"] .st-key-s2f_grp_force > div {
 
 /* === Action buttons row (measure + downloads) === */
 div[data-testid="stHorizontalBlock"]:has([data-testid="stDownloadButton"]):has([data-testid="stButton"]) {
-    background: #f8fafc;
-    border: 1px solid #e2e8f0;
+    background: var(--s2f-surface-2);
+    border: 1px solid var(--s2f-border);
     border-radius: 14px;
     padding: 0.65rem 0.6rem !important;
     margin-top: 0.5rem;
@@ -307,22 +337,22 @@ div[data-testid="stHorizontalBlock"]:has([data-testid="stDownloadButton"]):has([
     transform: translateY(-1px) !important;
 }
 div[data-testid="stHorizontalBlock"]:has([data-testid="stDownloadButton"]):has([data-testid="stButton"]) [data-testid="stDownloadButton"] button {
-    background: white !important;
-    border: 1px solid #e2e8f0 !important;
-    color: #334155 !important;
+    background: var(--s2f-surface) !important;
+    border: 1px solid var(--s2f-border) !important;
+    color: var(--s2f-text-secondary) !important;
     box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
 }
 div[data-testid="stHorizontalBlock"]:has([data-testid="stDownloadButton"]):has([data-testid="stButton"]) [data-testid="stDownloadButton"] button:hover {
     background: rgba(var(--s2f-primary-rgb), 0.06) !important;
     border-color: var(--s2f-primary) !important;
-    color: var(--s2f-primary-dark) !important;
+    color: var(--s2f-accent-text) !important;
     box-shadow: 0 2px 6px rgba(var(--s2f-primary-rgb), 0.12) !important;
     transform: translateY(-1px) !important;
 }
 
 /* === Expanders === */
 .stExpander {
-    border: 1px solid #e2e8f0 !important;
+    border: 1px solid var(--s2f-border) !important;
     border-radius: 12px !important;
     overflow: hidden;
     box-shadow: 0 1px 3px rgba(0,0,0,0.04);
@@ -330,7 +360,7 @@ div[data-testid="stHorizontalBlock"]:has([data-testid="stDownloadButton"]):has([
 
 /* === File uploader === */
 [data-testid="stFileUploader"] section {
-    border: 2px dashed #cbd5e1 !important;
+    border: 2px dashed var(--s2f-border-strong) !important;
     border-radius: 12px !important;
     transition: border-color 0.2s ease;
 }
@@ -345,7 +375,7 @@ div[data-testid="stHorizontalBlock"]:has([data-testid="stDownloadButton"]):has([
     gap: 8px;
     font-size: 0.92rem;
     font-weight: 600;
-    color: #334155;
+    color: var(--s2f-text-secondary);
     padding: 0.4rem 0;
 }
 .result-badge {
@@ -356,12 +386,12 @@ div[data-testid="stHorizontalBlock"]:has([data-testid="stDownloadButton"]):has([
     letter-spacing: 0.06em;
 }
 .result-badge.input {
-    background: #e2e8f0;
-    color: #475569;
+    background: var(--s2f-badge-bg);
+    color: var(--s2f-text-faint);
 }
 .result-badge.output {
     background: rgba(var(--s2f-primary-rgb), 0.15);
-    color: var(--s2f-primary-dark);
+    color: var(--s2f-accent-text);
 }
 
 /* === Run prediction info bar === */
@@ -371,29 +401,30 @@ div[data-testid="stHorizontalBlock"]:has([data-testid="stDownloadButton"]):has([
     gap: 10px;
     height: 42px;
     font-size: 0.85rem;
-    color: #64748b;
+    color: var(--s2f-text-muted);
 }
 .run-info-tag {
     background: rgba(var(--s2f-primary-rgb), 0.1);
-    color: var(--s2f-primary-dark);
+    color: var(--s2f-accent-text);
     font-weight: 600;
     font-size: 0.78rem;
     padding: 3px 10px;
     border-radius: 6px;
 }
 .run-info code {
-    background: #f1f5f9;
+    background: var(--s2f-code-bg);
     padding: 2px 8px;
     border-radius: 4px;
     font-size: 0.8rem;
-    color: #475569;
+    color: var(--s2f-text-faint);
 }
 
 /* === Messages === */
 .stSuccess {
-    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
+    background: linear-gradient(135deg, var(--s2f-success-start) 0%, var(--s2f-success-end) 100%) !important;
     border-left: 4px solid #10b981 !important;
     border-radius: 8px !important;
+    color: var(--s2f-success-text) !important;
 }
 .stWarning { border-radius: 8px !important; }
 .stInfo { border-radius: 8px !important; }
@@ -402,19 +433,19 @@ div[data-testid="stHorizontalBlock"]:has([data-testid="stDownloadButton"]):has([
 [data-testid="stSelectbox"] > div > div,
 [data-testid="stSelectbox"] input,
 [data-testid="stMultiSelect"] > div > div {
-    color: #1e293b !important;
-    background-color: #ffffff !important;
+    color: var(--s2f-text) !important;
+    background-color: var(--s2f-surface) !important;
 }
 /* Multiselect input: transparent so it doesn't show as a white block before the tags */
 [data-testid="stMultiSelect"] input {
     background-color: transparent !important;
-    color: #1e293b !important;
+    color: var(--s2f-text) !important;
     min-width: 2ch !important;
 }
 [data-testid="stSelectbox"] > div > div,
 [data-testid="stMultiSelect"] > div > div {
     border-radius: 8px !important;
-    border: 1px solid #cbd5e1 !important;
+    border: 1px solid var(--s2f-border-strong) !important;
     transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
 }
 section[data-testid="stSidebar"] [data-testid="stSelectbox"] > div > div:focus-within,
@@ -428,7 +459,7 @@ section[data-testid="stSidebar"] [data-testid="stMultiSelect"] > div > div:focus
 }
 /* Toggle: on state uses --s2f-primary */
 [data-testid="stToggle"] [data-baseweb="toggleTrack"] {
-    background-color: #cbd5e1 !important;
+    background-color: var(--s2f-border-strong) !important;
 }
 [data-testid="stToggle"] [data-baseweb="toggleTrack"][aria-checked="true"] {
     background-color: var(--s2f-primary) !important;
@@ -437,27 +468,27 @@ section[data-testid="stSidebar"] [data-testid="stMultiSelect"] > div > div:focus
     background-color: var(--s2f-primary) !important;
 }
 [data-testid="stToggle"] [data-baseweb="toggleTrack"][data-state="unchecked"] {
-    background-color: #cbd5e1 !important;
+    background-color: var(--s2f-border-strong) !important;
 }
 /* Newer Streamlit may render a switch button instead of Base Web track */
 [data-testid="stToggle"] button[role="switch"][aria-checked="true"] {
     background-color: var(--s2f-primary) !important;
 }
 [data-testid="stToggle"] button[role="switch"][aria-checked="false"] {
-    background-color: #cbd5e1 !important;
+    background-color: var(--s2f-border-strong) !important;
 }
-/* Dropdown options: ensure visible text on light background */
+/* Dropdowns can render outside .stApp, so resolve colors here instead of inherited variables. */
 [role="listbox"] [role="option"],
 [data-baseweb="menu"] li,
 ul[role="listbox"] li {
-    color: #1e293b !important;
-    background-color: #ffffff !important;
+    color: light-dark(#1e293b, #e2e8f0) !important;
+    background-color: light-dark(#ffffff, #111827) !important;
 }
 /* Sidebar / form labels (colormap row, section titles) */
 .s2f-form-label {
     font-size: 0.95rem;
     font-weight: 500;
-    color: #334155;
+    color: var(--s2f-text-secondary);
     line-height: 1.2;
     margin: 0;
 }
@@ -492,7 +523,7 @@ ul[role="listbox"] li {
     padding: 0 1px;
     font-size: 0.65rem;
     font-weight: 600;
-    color: #64748b;
+    color: var(--s2f-text-muted);
     letter-spacing: 0.03em;
 }
 .colorbar-ticks .cb-tick {
@@ -508,7 +539,7 @@ ul[role="listbox"] li {
     box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
 /* === Divider === */
-hr { border-color: #cbd5e1 !important; opacity: 0.7; }
+hr { border-color: var(--s2f-border-strong) !important; opacity: 0.7; }
 
 /* === Plotly chart === */
 .stPlotlyChart { border-radius: 12px; overflow: hidden; }
@@ -521,10 +552,10 @@ hr { border-color: #cbd5e1 !important; opacity: 0.7; }
     right: 0;
     z-index: 999;
     padding: 0.5rem 1rem 0.55rem;
-    background: #f1f5f9;
-    border-top: 1px solid #e2e8f0;
+    background: var(--s2f-footer-bg);
+    border-top: 1px solid var(--s2f-border);
     font-size: 0.7rem;
-    color: #64748b;
+    color: var(--s2f-text-muted);
     text-align: center;
     line-height: 1.45;
 }
@@ -561,19 +592,33 @@ section[data-testid="stSidebar"] > div:first-child {
 /* Measure tool: value panel (replaces inline styles in measure_tool.py) */
 .s2f-measure-vals-heading {
     font-weight: 400;
-    color: #334155;
+    color: var(--s2f-text-secondary);
     font-size: 0.95rem;
     margin: 0 20px 4px 4px;
 }
 .s2f-measure-vals-panel {
     width: 100%;
     box-sizing: border-box;
-    border: 1px solid #e2e8f0;
+    border: 1px solid var(--s2f-border);
     border-radius: 10px;
     padding: 10px 12px;
     margin: 0 10px 20px 10px;
-    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+    background: linear-gradient(145deg, var(--s2f-surface-2) 0%, var(--s2f-surface-3) 100%);
+    box-shadow: 0 1px 3px var(--s2f-shadow);
+}
+.s2f-region-table {
+    border-collapse: collapse;
+    width: 100%;
+    color: var(--s2f-text);
+}
+.s2f-region-table th,
+.s2f-region-table td {
+    border: 1px solid var(--s2f-border);
+    padding: 8px;
+    text-align: left;
+}
+.s2f-region-table th {
+    background: var(--s2f-surface-2);
 }
 .s2f-measure-vals-grid {
     display: flex;

S2FApp/ui/measure_tool.py

@@ -155,21 +155,15 @@ def render_region_metrics_and_downloads(metrics_list, masks, heatmap_rgb, input_
     # Render as HTML table to avoid Streamlit's default row/column indices
     header = table_rows[0]
     body = table_rows[1:]
-    th_cells = "".join(
-        f'<th style="border: 1px solid #ddd; padding: 8px; text-align: left;">{html.escape(str(h))}</th>'
-        for h in header
-    )
+    th_cells = "".join(f"<th>{html.escape(str(h))}</th>" for h in header)
     rows_html = [
         "<tr>"
-        + "".join(
-            f'<td style="border: 1px solid #ddd; padding: 8px;">{html.escape(str(c))}</td>'
-            for c in row
-        )
+        + "".join(f"<td>{html.escape(str(c))}</td>" for c in row)
         + "</tr>"
         for row in body
     ]
     table_html = (
-        f'<table style="border-collapse: collapse; width: 100%;">'
+        '<table class="s2f-region-table">'
         f"<thead><tr>{th_cells}</tr></thead>"
         f"<tbody>{''.join(rows_html)}</tbody></table>"
     )