Capacitor: config of Apple iPhone 12 Pro Max status bar background

Hello Everyone Myself Emmanuel Katto Uganda,

I’m new to using Capacitor and I’m wondering if there is a way to configure the background color of the status bar (the area containing the time and battery/Wi-Fi icons around the notches) on iOS so that when scrolling in my application, the time doesn’t “overlap” with other content (screenshot of that below). Is it possible to just make this area black or something similar?


I’m using the following viewport settings:

width=device-width, initial-scale=1, user-scalable=no, viewport-fit=auto
I was looking at using StatusBarStyle from capacitor/status-bar, but it looks like that’s deprecated:


I’m using Vue/NuxtJS, if it matters

Thank You!

you have to make your header extend to the safe areas