feat: add iOS platform detection and improve dark theme contrast

web/src/hooks/useTheme.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState, useSyncExternalStore } from 'react'
+import { useSyncExternalStore } from 'react'
 import { getTelegramWebApp } from './useTelegram'
 
 type ColorScheme = 'light' | 'dark'
@@ -8,10 +8,20 @@ function getColorScheme(): ColorScheme {
     return tg?.colorScheme === 'dark' ? 'dark' : 'light'
 }
 
+function isIOS(): boolean {
+    return /iPad|iPhone|iPod/.test(navigator.userAgent)
+}
+
 function applyTheme(scheme: ColorScheme): void {
     document.documentElement.setAttribute('data-theme', scheme)
 }
 
+function applyPlatform(): void {
+    if (isIOS()) {
+        document.documentElement.classList.add('ios')
+    }
+}
+
 // External store for theme state
 let currentScheme: ColorScheme = getColorScheme()
 const listeners = new Set<() => void>()

web/src/index.css

@@ -37,6 +37,9 @@
 }
 
 [data-theme="dark"] {
+    /* Override secondary-bg for better contrast on iOS - matches happy-app surfaceHigh */
+    --app-secondary-bg: #2C2C2E;
+
     --app-border: rgba(255, 255, 255, 0.1);
     --app-divider: rgba(255, 255, 255, 0.08);
     --app-subtle-bg: rgba(255, 255, 255, 0.05);