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);