dark mode

app.py

@@ -21,7 +21,7 @@ def _wx_emoji(txt):
     """Safely format weather text with emoji icons"""
     if txt is None or (isinstance(txt, float) and np.isnan(txt)):
         return "—"
-    txt = str(txt)  # ensure always string
+    txt = str(txt)  # ensure string
     t = txt.lower()
     if "thunder" in t: return "⛈️ " + txt
     if "shower" in t or "rain" in t or "drizzle" in t: return "🌧️ " + txt
@@ -30,7 +30,6 @@ def _wx_emoji(txt):
     if "clear" in t or "sun" in t: return "☀️ " + txt
     return txt
 
-
 def _fmt(x, nd=1):
     if x is None or (isinstance(x, float) and np.isnan(x)): return "—"
     if isinstance(x, (int, np.integer)): return f"{x:d}"
@@ -38,15 +37,18 @@ def _fmt(x, nd=1):
     return escape(str(x))
 
 def _heat(value, vmax, hue="blue"):
+    """Inline, subtle heat-tint that works in light/dark."""
     try:
         v = float(value or 0.0)
     except:
         v = 0.0
     pct = max(0.0, min(1.0, v / max(vmax, 1e-9)))
     if hue == "blue":
-        return f"background: rgba(0, 123, 255, {0.08*pct});"
+        # blue overlay
+        return f"background: rgba(59, 130, 246, {0.18*pct});"
     if hue == "green":
-        return f"background: rgba(0, 200, 83, {0.08*pct});"
+        # green overlay
+        return f"background: rgba(34, 197, 94, {0.18*pct});"
     return ""
 
 def build_pretty_table(df: pd.DataFrame) -> tuple[str, dict]:
@@ -54,18 +56,18 @@ def build_pretty_table(df: pd.DataFrame) -> tuple[str, dict]:
         return "<p>No data.</p>", {}
 
     df = df.copy()
-    df["XW_mm"] = pd.to_numeric(df.get("XW_Precip_mm"), errors="coerce")
+    df["XW_mm"]   = pd.to_numeric(df.get("XW_Precip_mm"), errors="coerce")
     df["TMRW_mm"] = pd.to_numeric(df.get("TMRW_PrecipRate_mmph"), errors="coerce")
-    df["XW_PoP"] = pd.to_numeric(df.get("XW_RAIN_PROB_%"), errors="coerce")
-    df["TMRW_PoP"] = pd.to_numeric(df.get("TMRW_RAIN_PROB_%"), errors="coerce")
+    df["XW_PoP"]  = pd.to_numeric(df.get("XW_RAIN_PROB_%"), errors="coerce")
+    df["TMRW_PoP"]= pd.to_numeric(df.get("TMRW_RAIN_PROB_%"), errors="coerce")
 
-    # Rain alert condition
+    # Rain alert rows
     rain_flag = (
         ((df["XW_mm"] >= 1.0) | (df["TMRW_mm"] >= 1.0)) |
         ((df["XW_PoP"] >= 70) | (df["TMRW_PoP"] >= 70))
     )
 
-    # Next rain + peak rain
+    # Next rain (either provider hits threshold first)
     def _first_rain_row():
         for _, row in df.iterrows():
             if (row.get("XW_mm", 0) >= 1) or (row.get("TMRW_mm", 0) >= 1) or \
@@ -74,14 +76,14 @@ def build_pretty_table(df: pd.DataFrame) -> tuple[str, dict]:
         return None
     next_rain = _first_rain_row()
 
+    # Peak rain (max of providers)
     xw_vals = df["XW_mm"].fillna(0).to_numpy() if "XW_mm" in df else np.zeros(len(df))
     tm_vals = df["TMRW_mm"].fillna(0).to_numpy() if "TMRW_mm" in df else np.zeros(len(df))
     df["peak_proxy"] = np.maximum(xw_vals, tm_vals)
-
     if df["peak_proxy"].max() > 0:
-        peak_idx = int(df["peak_proxy"].idxmax())
+        peak_idx  = int(df["peak_proxy"].idxmax())
         peak_when = df.iloc[peak_idx]["Local Time"]
-        peak_amt = float(df.iloc[peak_idx]["peak_proxy"])
+        peak_amt  = float(df.iloc[peak_idx]["peak_proxy"])
     else:
         peak_when, peak_amt = None, 0.0
 
@@ -92,12 +94,12 @@ def build_pretty_table(df: pd.DataFrame) -> tuple[str, dict]:
         "has_rain": bool(next_rain),
     }
 
-    # --- Grouped header ---
+    # --- Grouped headers (2 rows) ---
     rows_html = []
     rows_html.append(
         "<thead>"
         "<tr>"
-        "<th rowspan='2'>Local Time</th>"
+        "<th rowspan='2' class='local-col'>Local Time</th>"
         "<th class='xw-col' colspan='3'>Xweather</th>"
         "<th class='tm-col' colspan='3'>Tomorrow.io</th>"
         "</tr>"
@@ -118,7 +120,7 @@ def build_pretty_table(df: pd.DataFrame) -> tuple[str, dict]:
     body = []
     for i, r in df.iterrows():
         alert = rain_flag.iloc[i]
-        tr_style = "background: rgba(255,165,0,0.08);" if alert else ""
+        tr_style = "background: var(--alert-bg);" if alert else ""
         cells = [
             f"<td>{escape(str(r.get('Local Time','')))}</td>",
             f"<td class='xw-cell'>{_wx_emoji(r.get('XW_Weather'))}</td>",
@@ -130,20 +132,51 @@ def build_pretty_table(df: pd.DataFrame) -> tuple[str, dict]:
         ]
         body.append(f"<tr style='{tr_style}'>" + "".join(cells) + "</tr>")
 
+    # --- Adaptive (light/dark) CSS using CSS variables ---
     table_css = """
     <style>
+      :root {
+        --bg: #ffffff;
+        --fg: #111111;
+        --muted: #fafafa;
+        --border: #e5e7eb;
+        --xw-head: #cfe2ff;   /* header blue */
+        --tm-head: #d4edda;   /* header green */
+        --xw-cell: #f8fbff;   /* body blue tint */
+        --tm-cell: #f9fff9;   /* body green tint */
+        --alert-bg: rgba(255, 193, 7, 0.12); /* amber */
+      }
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --bg: #0b1220;
+          --fg: #e5e7eb;
+          --muted: #131c2b;
+          --border: #243042;
+          --xw-head: #10335f;
+          --tm-head: #0f3b26;
+          --xw-cell: #0f213e;
+          --tm-cell: #0f2a1a;
+          --alert-bg: rgba(255, 193, 7, 0.18);
+        }
+      }
+
+      .wx-scope { color: var(--fg); background: transparent; }
       .wx-table { width: 100%; border-collapse: collapse; font-family: ui-sans-serif, system-ui, -apple-system; }
-      .wx-table th, .wx-table td { padding: 10px 8px; border-bottom: 1px solid #eee; font-size: 14px; vertical-align: middle; text-align: center;}
+      .wx-table th, .wx-table td {
+        padding: 10px 8px; border-bottom: 1px solid var(--border);
+        font-size: 14px; vertical-align: middle; text-align: center; color: var(--fg);
+      }
       .wx-table thead th { position: sticky; top: 0; z-index: 1; }
-      .wx-table th.xw-col { background: #cfe2ff; text-align: center;}   /* Xweather headers */
-      .wx-table th.tm-col { background: #d4edda; text-align: center;}   /* Tomorrow.io headers */
-      .wx-table th:first-child { background: #fafafa; }
-      .xw-cell { background: #f8fbff; }
-      .tm-cell { background: #f9fff9; }
+      .wx-table th.local-col { background: var(--muted); }
+      .wx-table th.xw-col   { background: var(--xw-head); }
+      .wx-table th.tm-col   { background: var(--tm-head); }
+      .xw-cell { background: var(--xw-cell); }
+      .tm-cell { background: var(--tm-cell); }
+
       .wx-chips { display:flex; gap:8px; flex-wrap: wrap; margin: 10px 0 6px; }
-      .chip { padding:6px 10px; border-radius: 999px; background: #f5f5f5; border:1px solid #eee; font-size: 13px; }
-      .chip.good { background:#e6f4ea; border-color:#ccebd7; }
-      .chip.warn { background:#fff7e6; border-color:#ffe2b3; }
+      .chip { padding:6px 10px; border-radius: 999px; background: var(--muted); border:1px solid var(--border); font-size: 13px; color: var(--fg); }
+      .chip.good { box-shadow: inset 0 0 0 9999px rgba(34,197,94,0.12); }
+      .chip.warn { box-shadow: inset 0 0 0 9999px rgba(255,193,7,0.12); }
     </style>
     """
 
@@ -157,13 +190,15 @@ def build_pretty_table(df: pd.DataFrame) -> tuple[str, dict]:
 
     table_html = f"""
     {table_css}
-    {header_html}
-    <table class="wx-table">
-      {''.join(rows_html)}
-      <tbody>
-        {''.join(body)}
-      </tbody>
-    </table>
+    <div class="wx-scope">
+      {header_html}
+      <table class="wx-table">
+        {''.join(rows_html)}
+        <tbody>
+          {''.join(body)}
+        </tbody>
+      </table>
+    </div>
     """
     return table_html, summary
 
@@ -182,8 +217,9 @@ TMRW_WEATHER_CODE = {
     1001: "Cloudy", 2000: "Fog", 2100: "Light Fog",
     4000: "Drizzle", 4001: "Rain", 4200: "Light Rain", 4201: "Heavy Rain",
     5000: "Snow", 5001: "Flurries", 5100: "Light Snow", 5101: "Heavy Snow",
-    6000: "Freezing Drizzle", 6001: "Freezing Rain", 6200: "Light Freezing Rain", 6201: "Heavy Freezing Rain",
-    7000: "Ice Pellets", 7101: "Heavy Ice Pellets", 7102: "Light Ice Pellets",
+    6000: "Freezing Drizzle", 6001: "Freezing Rain", 6200: "Light Freezing Rain",
+    6201: "Heavy Freezing Rain", 7000: "Ice Pellets",
+    7101: "Heavy Ice Pellets", 7102: "Light Ice Pellets",
     8000: "Thunderstorm"
 }
 
@@ -240,7 +276,7 @@ def fetch_tomorrow_hourly(latlon: str, hours: int = 24):
             "TMRW_Weather": TMRW_WEATHER_CODE.get(code, str(code) if code is not None else None),
             "TMRW_Humidity_%": v.get("humidity"),
             "TMRW_RAIN_PROB_%": v.get("precipitationProbability"),
-            "TMRW_PrecipRate_mmph": v.get("rainIntensity"),
+            "TMRW_PrecipRate_mmph": v.get("precipitationIntensity"),  # ✅ correct field
             "TMRW_Visibility_km": v.get("visibility"),
             "TMRW_Cloud_%": v.get("cloudCover"),
         })
@@ -257,7 +293,7 @@ def build_side_by_side(location: str):
         local_tz = ZoneInfo("Asia/Singapore")  # UTC+8
         merged["Local Time"] = (
             pd.to_datetime(merged["time_hour_utc"])
-            .dt.tz_convert(local_tz)   # ✅ directly convert from UTC
+            .dt.tz_convert(local_tz)
             .dt.strftime("%Y-%m-%d %H:%M %Z")
         )
     except Exception: