From a6d088b51d9edc8216658a776d052a480f402abf Mon Sep 17 00:00:00 2001
From: weishu <twsxtd@gmail.com>
Date: Wed, 17 Dec 2025 18:48:44 +0800
Subject: [PATCH] feat: add iOS platform detection and improve dark theme
 contrast

---
 web/src/hooks/useTheme.ts | 12 +++++++++++-
 web/src/index.css         |  3 +++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/web/src/hooks/useTheme.ts b/web/src/hooks/useTheme.ts
index 19f9644a..ba691479 100644
--- a/web/src/hooks/useTheme.ts
+++ b/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>()
diff --git a/web/src/index.css b/web/src/index.css
index 9dc0aa19..a15d4ce4 100644
--- a/web/src/index.css
+++ b/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);