mirror of
https://github.com/wu736139669/hapi.git
synced 2026-08-05 06:24:37 +00:00
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:
@@ -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
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user