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
This commit is contained in:
weishu
2025-12-19 00:15:48 +08:00
parent ac67718ec0
commit 7da8144ff6
2 changed files with 11 additions and 2 deletions
+3
View File
@@ -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)
+8 -2
View File
@@ -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);