CardElement isn't transparent if color-scheme is set in parent page

[Aycarambo]

At least using google Chrome, iframes are not transparent if they do not contain the same color-scheme tag value as the parent page.

So when implementing a dark theme on a website, it is impossible to style the background-color of the CardElement to match the user's current theme.

Potential solution : add a new optionnal object key to the CardElement({}) constructor for passing in the value of the color-scheme tag.

[jritterbush]

I think another option could be if Recurly could add <meta name="color-scheme" content="light dark"> to the head of the iframed page so that if the parent page is set to dark or light either should work.

[jritterbush]

My workaround was to add .recurly-hosted-field-card iframe { color-scheme: light } to my CSS.

That forces the iframe to light mode, which makes the iframe transparent so your site will control the background color at least. The fontColor prop can then be set based on your site's color-scheme/theme. That is working for me until a more permanent fix can be set up