I am using the new google sign in button and one tap login in angular. Currently, I am using a library
I tried disabling all styles on my application. but nothing changed. When I directly inspect the button/popup and apply some color to body of the dynamically generated iframe, the colors are changing. no other colors are affected.
below is my html setup according to library docs.
<asl-google-signin-button GoogleSigninButtonDirective type='standard' size="large" width="320"
theme="filled_blue">
</asl-google-signin-button>
below is app module.
{
provide: 'SocialAuthServiceConfig',
useValue: {
autoLogin: false,
providers: [
{
id: GoogleLoginProvider.PROVIDER_ID,
provider: new GoogleLoginProvider(
'clientId_here',
),
}
],
one rror: (err) => {
console.error(err);
},
} as SocialAuthServiceConfig,
}
The issue seems that not related to this specific package because I tried without using any package and gave same results.
CodePudding user response:
I had this happen when the page was in dark theme, with color-scheme: dark
set in CSS or with a meta tag.
Putting color-scheme: light
on the button/one-tap popup container or on the iframe itself solved it.