MomenSherif
The dark theme is terrible
I was hoping to create a dark version of the button by setting theme to "filled_black", but the result is this:
As you can see there's a white background in the iframe and it looks terrible. I was unable to overrride it with CSS because it is an iframe
Can you try adding color-scheme dark to your project IDK if it will make google's iframe to render in dark https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
Hello, thank you for your reply. Where do I need to put this CSS property?
I removed the color-scheme altogether from my css, and the button now renders correctly in both dark and light themes (I have a switch that changes data-theme="light" / "dark" in my application.
I just had :root { color-scheme: light dark; } in my index.css and removed that line, for some reason this made it work.
I just had :root { color-scheme: light dark; } in my index.css and removed that line, for some reason this made it work.
Thank you
I just had :root { color-scheme: light dark; } in my index.css and removed that line, for some reason this made it work.
I don't have that line in my css, what can I change to fix it?
I just had :root { color-scheme: light dark; } in my index.css and removed that line, for some reason this made it work.
I don't have that line in my css, what can I change to fix it?
Wrap your GoogleLogin like this:
<div style={{ colorScheme: 'light' }}>
<GoogleLogin ... />
</div>
