CODEWITHSUNDEEP
firebaseui
hvkale
hvkale

Reputation: 17787

Dark variant of Google Sign In button using FirebaseUI for web?

I am using firebaseui-web-react-wrapper and would like to switch Google Sign In button to the dark variant. In the app I am working on, the container of this button is white and it does not look great to put a white button in a white container.

FirebaseUI defaults to -

enter image description here

I would like to use -

enter image description here

Please note that the dark screenshot is taken from the Google's official page and it does follow Google's official branding guidelines.

Upvotes: 5

Views: 187

Answers (1)

xaphod
xaphod

Reputation: 6804

I was able to tweak it with just CSS to get close to the Google guidelines. It's not perfect but it's a lot better than white-on-white.

I'm in a NextJS app, using the stock CSS: import 'firebaseui/dist/firebaseui.css'

Also note i'm not using the react wrapper, i'm using import('firebaseui') directly.

This is what i've added to my global CSS:

/* Overriding FirebaseUI CSS for sign-in button styling */
.firebaseui-idp-google {
  padding: 0 !important;
  border: 1px solid #4285f4 !important;
  background-color: #4285f4 !important;
}

.firebaseui-idp-google > .firebaseui-idp-text {
  color: white !important;
}

.firebaseui-idp-google > .firebaseui-idp-icon-wrapper {
  padding: 10px;
  background-color: white;
}

... and this is the result (it only changes the Google button):

result

Upvotes: 0

Related Questions