Sravan/BizGaze_Remote
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

System bars: lock in Option 1 (brand-blue bars) on iOS + Android

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Sravan
2026-09-19 18:13:55 +05:30
parent 03de639e1a
commit 1ece8e1061
2 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/public/home.html
+8 -4
View File
@@ -1324,10 +1324,14 @@ function twemojify(_el){ /* native emoji: nothing to do */ }</script>
// 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