“使用 Google 登录”按钮和“一键”弹出窗口周围的白色背景问题

Question

我正在使用新的谷歌登录按钮和一键登录角度。目前，我正在使用库@abacritt/angularx-social-login。我尝试直接使用该/gsi/client脚本，这个也只给出了相同的结果。附上图像以供参考。

我尝试禁用我的应用程序上的所有样式。但一切都没有改变。当我直接检查按钮/弹出窗口并将一些颜色应用于动态生成的 iframe 的主体时，颜色正在发生变化。没有其他颜色受到影响。

下面是我根据库文档设置的 html。

<asl-google-signin-button GoogleSigninButtonDirective type='standard' size="large" width="320"
    theme="filled_blue">
</asl-google-signin-button>

下面是应用程序模块。

{
      provide: 'SocialAuthServiceConfig',
      useValue: {        
        autoLogin: false,
        providers: [
          {
            id: GoogleLoginProvider.PROVIDER_ID,
            provider: new GoogleLoginProvider(
              'clientId_here',
            ),            
          }
        ],
        onError: (err) => {
          console.error(err);
        },
      } as SocialAuthServiceConfig,
    }

这个问题似乎与这个特定的包无关，因为我尝试不使用任何包并给出相同的结果。

Answer 1

当页面处于深色主题、color-scheme: dark在 CSS 中设置或使用元标记时，我会发生这种情况。

放在color-scheme: light按钮/一键弹出容器或 iframe 本身上解决了这个问题。