From 7da8144ff60fc3331eb2884cb80618bd052fb49f Mon Sep 17 00:00:00 2001
From: weishu <twsxtd@gmail.com>
Date: Fri, 19 Dec 2025 00:15:48 +0800
Subject: [PATCH] fix(web): restore dark mode styling broken by conditional
 Telegram SDK loading

The conditional Telegram SDK loading (commit 4606ba2) caused dark mode to
break in non-Telegram browsers. Added dark mode CSS variable overrides with
proper fallbacks, and restored the module-level applyTheme() call that applies
theme before React renders, preventing a flash of incorrect styling.

- web/src/index.css: Added dark mode overrides for primary colors (--app-bg,
  --app-fg, --app-hint, --app-link, --app-button, --app-button-text,
  --app-secondary-bg) with system-appropriate dark fallbacks when Telegram
  theme variables are unavailable
- web/src/hooks/useTheme.ts: Restored module-level applyTheme(currentScheme)
  call to ensure theme is applied before React renders
---
 web/src/hooks/useTheme.ts |  3 +++
 web/src/index.css         | 10 ++++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/web/src/hooks/useTheme.ts b/web/src/hooks/useTheme.ts
index 0085562d..25457ca9 100644
--- a/web/src/hooks/useTheme.ts
+++ b/web/src/hooks/useTheme.ts
@@ -35,6 +35,9 @@ function applyPlatform(): void {
 let currentScheme: ColorScheme = getColorScheme()
 const listeners = new Set<() => void>()
 
+// Apply theme immediately at module load (before React renders)
+applyTheme(currentScheme)
+
 function subscribe(callback: () => void): () => void {
     listeners.add(callback)
     return () => listeners.delete(callback)
diff --git a/web/src/index.css b/web/src/index.css
index d6b42111..d4f762b0 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -37,8 +37,14 @@
 }
 
 [data-theme="dark"] {
-    /* Override secondary-bg for better contrast on iOS - matches happy-app surfaceHigh */
-    --app-secondary-bg: #2C2C2E;
+    /* Primary colors - override fallbacks for non-Telegram browsers */
+    --app-bg: var(--tg-theme-bg-color, #1c1c1e);
+    --app-fg: var(--tg-theme-text-color, #ffffff);
+    --app-hint: var(--tg-theme-hint-color, #8e8e93);
+    --app-link: var(--tg-theme-link-color, #0a84ff);
+    --app-button: var(--tg-theme-button-color, #0a84ff);
+    --app-button-text: var(--tg-theme-button-text-color, #ffffff);
+    --app-secondary-bg: var(--tg-theme-secondary-bg-color, #2C2C2E);
 
     --app-border: rgba(255, 255, 255, 0.1);
     --app-divider: rgba(255, 255, 255, 0.08);