Hi, when using the dark theme I notice that the credit card input form has some issues.
When I type in the card number the color is gray and it’s impossible to override from my end since the form itself is wrapped in an iframe. There is also some help text (I believe in test mode) which is hard to read.
I should point out that this happens on the official snipcart demo page as well https://demo.snipcart.com/
I’ve attached screenshots for reference.
Any help would be greatly appreciated.
Hey @simlink,
Thanks for the heads up! I just made some changes on the demo to fix the issue here on our demo.
To customize the colors and fonts of the payment form, you need to use our JavaScript SDK. Since the form itself is embedded in an iframe, it can’t be simply changed in CSS. You’ll find documentation on how to customize it right here in our docs.
Hi charles thanks for the quick reply 
I tried and was able to get the labels to fix, now I can read the dev mode message about the credit card, but no dice on the input text color (e.g. when i type the card number in)
Here’s the URL of the page so you can take a look and if you view source you’ll see the code I’m using, very similar to that on the demo page: https://bit.ly/37hSHNr
Snipcart.api.theme.customization.registerPaymentFormCustomization({
input: {
color: ‘#e6e6e6’
},
label: {
color: ‘#e6e6e6’
}
});
Also, any idea why the credit card icon breaks when I type an unknown card number (e.g. 1234)?
kindly following up
The issue is related to our fake credit card form. If you connect Stripe for instance, the input color and card icons will work as expected.
I flagged this as a bug, can’t commit on an ETA for the fix at the moment though.
Hi, how did you target the background of the form?
Can’t seem to get it to work in test or in prod.
I have tried adding/guessing other selectors but I can’t work out why that area is still white 
EDIT to provide more detail:
The light mode works fine. I am a new user so I can only upload one image.
I read the current css variables whenever the cart route changes.
Here is my js file that loads the config:
document.addEventListener('snipcart.ready', () => {
Snipcart.events.on('theme.routechanged', (routesChange) => {
let background = getComputedStyle(document.documentElement).getPropertyValue('--background');
let text= getComputedStyle(document.documentElement).getPropertyValue('--text');
let border= getComputedStyle(document.documentElement).getPropertyValue('--dark-accent');
Snipcart.api.theme.customization.registerPaymentFormCustomization({
input: {
backgroundColor: background,
color: text,
border: '1px solid ' + border,
fontSize: '16px',
placeholder: {
color: text,
},
},
label: {
color: text,
fontSize: '14px',
backgroundColor: background,
},
});
})
});
I found the issue.
In my implementation of Dark Mode, I am appending the color-scheme to the styles. For example:
<html data-theme="dark" style="color-scheme: dark;" class="snipcart-cart--opened">
In the case of the light colour scheme it works fine, but when the color-scheme is dark I get that issue.
So for now I can’t set the ‘colour-scheme’ style property on the main html, but it’s something I usually do, if possible to support it it would be great.