White Background issue around "Sign in with Google" Button and "One Tap" Popup

Issue

I am using the new google sign in button and one tap login in angular. Currently, I am using a library @abacritt/angularx-social-login. I tried directly using the /gsi/client script and this one also gave the same result only. Atatching image for reference.

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',
            ),            
          }
        ],
        onError: (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.

Solution

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.

Answered By - Remiscan