Setting backgroundColor in capacitor.config.json does not work

[bsbechtel]

Description of the problem:
setting backgroundColor in capacitor.config.json file does not appear to do anything

Affected platform

• Android
• iOS
• electron did not test
• web

OS of the development machine

• Windows
• macOS
• linux

Other information:

Capacitor version:
1.1.1
node version:
12.5.0
npm version:
6.10.1
CocoaPods version:
1.7.5

Steps to reproduce:
create a new Ionic Capacitor project with:
ionic start myProject --capacitor

add this line to capacitor.config.json:
"backgroundColor": "#E5E5E5"

run project using:
ionic build && npx cap copy && npx cap open ios
The background of the app will still be white (#fffffff), but if you print() the value of the background color in CAPBridgeViewController.swift, it will be #E5E5E5.
Note: In Android, the background of the app does change colors, but it is not clear in the docs this is only configuring the webview and not the ionic framework scss. Making that distinction would clear up some confusion.

Link to sample project:

[jcesarmobile]

Capacitor is frameworks agnostic, so it won't change Ionic SCSS or any other CSS on any framework.

The backgroundColor only changes the webview background color, not the app background color, you can do it with CSS, but Capacitor won't overwrite it. See #1003 for more information about the "backgroundColor" configuration option.

[bsbechtel]

The issue was opened for two reasons, though my apologies for not clarifying. 1) It's still an issue on iOS (iOS 11, Xcode 10.2.1), and 2) Adding some wording that clarifies this is not setting the background for an ionic app would be helpful. If you could look more closely at 1, it would be appreciated.

[jcesarmobile]

Why do you think it's not working if you see the color is correctly set if you print the value?
What do you expect to happen when you set it?
I've tested and it works as it should, but not sure what you expect to happen.

And for 2), docs say "Background color of Capacitor WebView", do you think it needs extra clarification to say that it won't set the Ionic app background? The docs don't mention Ionic at all except sections that contain Ionic examples, so I think adding such clarification will make it more confusing and people might think that Capacitor only works with Ionic or that it can mess with their projects.

[bsbechtel]

On iOS, if you remove all of the html/css styling, you still only get a white background. On Android, I can see the background color being set. So what I'm saying is the variable is set in Swift, but it's not being used correctly somewhere in the iOS stack. I can provide an example repo if you like, but it seems like a fairly straightforward thing to reproduce.

Regarding the docs, because the domain for the docs are under the ionicframework.com domain, it can lead you to believe it's setting the background color in the css somewhere. Just something simple like "Note, this backgroundColor is for the webview, and not any root level CSS styling properties." would probably be sufficient.

[zwacky]

I'm experiencing the same: setting backgroundColor in the capacitor.config.json (also inside "ios" config) doesn't yield any change in background. updated to latest versions and all.
@bsbechtel have you had any luck by now?

[bsbechtel]

I think we set it via css in the end. Last I remember, it still never worked properly with iOS.

[Syphonphilter]

I am having the same issue but on android. I set the backgroundColor in the capacitor.config.json file and it does not yield any result. I think I'm unhappy using capacitor. All my css Styling looks like crap

[fieres]

Setting the background color in capacitor.confog.json works for me like this:
"backgroundColor":"ff0000"
Basically, you should not prepend the color spec by a '#' sign.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.