“使用 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

当页面处于深色主题、在 CSS 中设置

color-scheme: dark

或使用元标记时，就会发生这种情况。

将

color-scheme: light

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