#cdubs44-ios
fossil lagoon
I'm using angular ionic which is built in angular and converted to an iOS app
So this is the html code
<form id="payment-form">
<div id="payment-element">
<!-- Elements will create form elements here -->
</div>
and then I set it here
appearance: {
theme: this.Dark.matches ? "night" : "flat",
labels: 'floating',
},
if the user is in darkmode, use night, else use flat
again, works great in all browsers, not so much in the actual app
bright stump
cdubs44-ios
feral burrow
Hi @fossil lagoon I'm also an engineer rom Stripe. Can you check if the form has a default css that makes the background color white?
fossil lagoon
yeah, I checked that. It looks like the .p-HeightObserver class is the culprit and I can't add or override it
but no default css making the background color white
feral burrow
The appearance API doesn't define the background color for PaymentElement, so the white background is coming from the parent element.
Or can you check the parent of the form?
feral burrow
If you open an empty webpage in your iOS app, is the background white or dark?
feral burrow
OK, then the workaround here is to set a appropriate background color for your form.
fossil lagoon
yeah, tried that. All good
feral burrow
That's great!
fossil lagoon
Well, didn't work.. All good as in, I'll live with it haha
feral burrow
Do you mind to share how you set the background color on the form?
fossil lagoon
@media (prefers-color-scheme: dark) {
.StripeElement{
background-color: #000000 !important;
}
}
feral burrow
can you set a simple style="background-color: #000000" to the form?
feral burrow
that's very strange, we just did the same in our test integration (on web) and we can see the background-color is changed.
feral burrow
Maybe you want to check with the ionic community and see if they have any advise on this?
fossil lagoon
Yeah. Thanks Jack
feral burrow
No problem!