CODEWITHSUNDEEP
cssreactjswkwebviewcapacitor
Neal Shah
Neal Shah

Reputation: 1

How to color safe areas black in Capacitor iOS (WKWebView)?

I'm trying to color the safe areas (notch area, home indicator) black in my Capacitor iOS app. The app uses WKWebView under the hood.

However, I'm still seeing white safe areas in the WKWebView, simulated on an iPhone simulator. The main content area is black as expected, but the notch area and bottom safe area remain white. I would preferably like to know links to documentation and tips to actually understand this problem rather than anyone just writing out the code (although that would help too). I have looked through the Capacitor documentation and found stuff about a StatusBar (@capacitor/status-bar), but nothing else. I might be missing something, but I am very new to this and it's hard for me to exactly understand.

Any help would be super super appreciated. I specifically want to maintain a consistent black background across the entire app, including safe areas.

I've attached some pictures which are the results of scrolling all the way to the top, left, right and bottom.

Scrolling all the way to top

Scrolling all the way left
Scrolling all the way right

Scrolling all the way down

What I've tried:

  1. Added viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

Added CSS in index.css:

cssCopybody {
  background-color: black;
}


body, html {
  width: 100vw;
  height: 100vh;
}

Set backgroundColor in capacitor.config.json:


jsonCopy{
  "ios": {
    "backgroundColor": "#000000"
  }
}

Upvotes: 0

Views: 55

Answers (1)

u4ii4y984484y203r
u4ii4y984484y203r

Reputation: 75

I achieved this by modifying the capacitor.config.ts file

   webDir: 'build',

ios: {

contentInset: 'always',

},

backgroundColor: '#078fd0',

};

export default config;

By simply adding the backgroundColor. Hope it works for you too :)

Upvotes: 0

Related Questions