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

Android: dark system-bar icons (visible on the white app)

Browse Source 
Under Android edge-to-edge the status/nav bar icons default to light (white) and
vanished on the white app (clock/battery/nav invisible). Set SafeArea
statusBarStyle/navigationBarStyle to LIGHT (= dark content on a light background)
in capacitor.config.json, and add a runtime SafeArea.setSystemBarsStyle call in
home.html so already-installed APKs get dark icons on relaunch (no rebuild). iOS
unaffected (its status bar already shows dark content on white).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Sravan
2026-09-18 00:24:39 +05:30
parent ab6d8161ee
commit 9d5af66a0e
2 changed files with 8 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mobile/capacitor.config.json
+3 -1
View File
@@ -14,7 +14,9 @@
"SafeArea": { "SafeArea": {
"detectViewportFitCoverChanges": true, "detectViewportFitCoverChanges": true,
"initialViewportFitCover": true, "initialViewportFitCover": true,
"offsetForKeyboardInsetBug": true "offsetForKeyboardInsetBug": true,
"statusBarStyle": "LIGHT",
"navigationBarStyle": "LIGHT"
}, },
"SystemBars": { "SystemBars": {
"insetsHandling": "disable" "insetsHandling": "disable"
server/public/home.html
+5
View File
@@ -1311,6 +1311,11 @@ function twemojify(_el){ /* native emoji: nothing to do */ }</script>
// juggling here — we only tag <html> so CSS can make small native-only tweaks if needed. // juggling here — we only tag <html> so CSS can make small native-only tweaks if needed.
(function(){ try{ var C=window.Capacitor; if(!C||!C.isNativePlatform||!C.isNativePlatform()) return; (function(){ try{ var C=window.Capacitor; if(!C||!C.isNativePlatform||!C.isNativePlatform()) return;
var p=(C.getPlatform&&C.getPlatform())||''; var r=document.documentElement; r.classList.add('native-app'); if(p) r.classList.add('native-'+p); var p=(C.getPlatform&&C.getPlatform())||''; var r=document.documentElement; r.classList.add('native-app'); if(p) r.classList.add('native-'+p);
// Android edge-to-edge: the system-bar icons default to LIGHT (white) → invisible on our white app (the
// 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.
if(p==='android'){ 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(_){} }
// Keyboard. The device log proved that on our build (resize:none) the WebView does NOT resize and // 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 // 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 // reliable signal is the Capacitor Keyboard plugin's reported height. Now that the iOS auto-zoom is