From 1ece8e10615feee324ec71a259a5f3ec1fe1400f Mon Sep 17 00:00:00 2001 From: sravan Date: Sat, 19 Sep 2026 18:13:55 +0530 Subject: [PATCH] System bars: lock in Option 1 (brand-blue bars) on iOS + Android MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit User picked the brand-blue look for both platforms. Apply .sysbar-blue on any native platform; set white icons via the safe-area plugin on Android and via @capacitor/status-bar on iOS. capacitor.config statusBarStyle/navigationBarStyle -> DARK (light icons) so native builds match before JS runs. iOS is live, so this web change reaches it immediately — verify on an iPhone. Co-Authored-By: Claude Opus 4.8 --- mobile/capacitor.config.json | 4 ++-- server/public/home.html | 12 ++++++++---- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/mobile/capacitor.config.json b/mobile/capacitor.config.json index 79d1fd8..705a784 100644 --- a/mobile/capacitor.config.json +++ b/mobile/capacitor.config.json @@ -15,8 +15,8 @@ "detectViewportFitCoverChanges": true, "initialViewportFitCover": true, "offsetForKeyboardInsetBug": true, - "statusBarStyle": "LIGHT", - "navigationBarStyle": "LIGHT" + "statusBarStyle": "DARK", + "navigationBarStyle": "DARK" }, "SystemBars": { "insetsHandling": "disable" diff --git a/server/public/home.html b/server/public/home.html index d5a5408..da59915 100644 --- a/server/public/home.html +++ b/server/public/home.html @@ -1324,10 +1324,14 @@ function twemojify(_el){ /* native emoji: nothing to do */ } // clock/battery/nav icons vanish). Set them to DARK content — in @capacitor-community/safe-area, style // 'LIGHT' means "dark content on a light background". Also mirrored in capacitor.config.json (statusBarStyle/ // navigationBarStyle) for a permanent fix on the next build; this runtime call fixes already-installed APKs. - // OPTION 2 (white bars + thin brand separator line): keep the bars white (CSS .sysbar-sep draws a 1.5px brand - // line under the status bar + above the nav bar) and use DARK icons (plugin style 'LIGHT' = dark content on a - // light bg). Swap to Option 1 by changing the class to 'sysbar-blue' and the two styles below to 'DARK'. - if(p==='android'){ r.classList.add('sysbar-sep'); try{ var SA=C.Plugins&&C.Plugins.SafeArea; if(SA&&SA.setSystemBarsStyle){ SA.setSystemBarsStyle({ style:'LIGHT', type:'STATUS_BAR' }); SA.setSystemBarsStyle({ style:'LIGHT', type:'NAVIGATION_BAR' }); } }catch(_){} } + // System-bar look = OPTION 1 (brand-blue bars) on BOTH iOS and Android. CSS .sysbar-blue fills the status + + // nav inset regions with brand blue; the bar ICONS are set to light/white to read on it. Android uses the + // safe-area plugin's setSystemBarsStyle (style 'DARK' = light content); iOS uses @capacitor/status-bar + // setStyle (Style 'DARK' = light content) — the canonical iOS status-bar API (home.html makes no other + // status-bar calls, so there's no conflict with the safe-area plugin). + if(p){ r.classList.add('sysbar-blue'); } + if(p==='android'){ try{ var SA=C.Plugins&&C.Plugins.SafeArea; if(SA&&SA.setSystemBarsStyle){ SA.setSystemBarsStyle({ style:'DARK', type:'STATUS_BAR' }); SA.setSystemBarsStyle({ style:'DARK', type:'NAVIGATION_BAR' }); } }catch(_){} } + else if(p==='ios'){ try{ var SB=C.Plugins&&C.Plugins.StatusBar; if(SB&&SB.setStyle){ SB.setStyle({ style:'DARK' }); } }catch(_){} } // Keyboard. The device log proved that on our build (resize:none) the WebView does NOT resize and // VisualViewport does NOT reflect the keyboard (clientHeight & vvHeight both stay full) — so the ONLY // reliable signal is the Capacitor Keyboard plugin's reported height. Now that the iOS auto-zoom is