Hey Ryan
Happy to help here.
I did some testing of this myself and I see exactly what you’re referring to. Seems that when the Styling is set to custom and Layout is set to anything other than “tabs” the Field Background color is added to the card.
I’ve let the team know about this and will create a feature request for a future update to hopefully add an additional color picker for the card portion of the appearance.
In the meantime, if you use the “tabs” layout with custom styling it doesn’t implement this behavior, you can also choose one of the predesigned stylings from the styling list if any of those would work better for the time being.
Best,
Kevin
Stellar Support
Awesome…thank you @kmarusek ! Would you mind updating the thread when/if you roll that out?
@ryanmvickerman we will update you for sure. We looked into it and found:
The Stripe component uses the background color for the field and the wrapper element (image #1). According to Stripe documentation, the colorBackground variable is used for the background of inputs, tabs, and other components in the Element.
I have to check if there is another variable to change only the background of the wrapper element. If not, we will have to add a custom CSS via rules option to granular customization.
More to come…
@dlocc and @kmarusek …so strange, I’ve tried everything in the Stripe documentation for customizing and nothing seems to work. I’ve been experimenting via JS and PHP with no luck. Do I need to have SP set to a certain style of form in order for the customizations to work?
Hey @ryanmvickerman, we just released 1.6.0, which resolves the input field color issue you reported. Thanks for helping us fix that!
@dlocc …awesome…thank you! LOVE this!
One quick note, when using a custom dark form, there are contrast issues with the payment methods.
https://imgur.com/a/6eAqXjP
Hey @ryanmvickerman – I’m glad you like it, but it looks like we still have some work to do. I have created the following feedback item that will soon be added to our roadmap: https://stellarpay.featureos.app/p/improve-dark-theme-support
Could you let me know:
1. What are your color settings for the payment element WP-Admin > StellarPay > Settings > Appearance – a screenshot would be great
2. Could you explain what you mean by “Contrast issues”? Do you mean the white-colored link authentication element, how the other payment method’s text is too dark to be accessible, or both?
3. Are there other details you’d like us to know so we can further improve dark mode support?
Thank you!
Ideally, the field text and the tab text would be independently. As you can see, it doesn’t always work out with with input backgrounds in certain colors, in this case #FFFFFF. Please see the screenshots below:
View post on imgur.com
@dlocc …thanks for considering adding this! Quick note, I have my checkout payment form on a dark background, not necessarily in dark mode (which I have too)
View post on imgur.com
