Firebaseui-web: Customize (style) the Google Sign-In Button

[deepfriedbrain]

I'm not sure if it's just me, but the Google Sign-In button is white and doesn't look nice on a white background page. Moreover, the Google logo on the button is colored while all the other logos are white on a colored background. I want to change the color to blue (as shown in the image below). I can update the CSS to change the color on the Google button, but is there a way to change the logo (to white) other than by doing it through DOM manipulation?

[wti806]

The logo URL is defined here: https://github.com/firebase/firebaseui-web/blob/master/javascript/ui/page/base.js#L55 You could change it to whatever you want and re-compile the library.

[deepfriedbrain]

Thanks for the pointer, but the default implementation doesn't look right - a white button on a white background with very little/poor contrast on the top border. In the zoomed up image in my original post it looks okay, but if you look at the demo page, the Google button looks blended with the white background. I'm surprised that it's not seen as an issue by others.

While I understand that you want Google logo to stand out with a multi-colored logo, it's a visual anomaly when all the other buttons are white on a non-white background.

Moreover, if I move the white Google button anywhere but the top, the whole UI looks very odd. I wanted to make the Email/password as the first option, but it looks really odd with the default implementation.

From a UI perspective, the default implementation is not good, and that's a feedback to your team.

[bojeil-google]

Your feedback is appreciated. The button was implemented based on the guidelines we have received from our UX designers. You can change the button look but you should stick to Google trademark rules and policies: https://www.google.com/permissions/

[hvkale]

Any way to use the dark (blue) theme button as shown here - https://developers.google.com/identity/sign-in/web/build-button

[duck132912]

Your feedback is appreciated. The button was implemented based on the guidelines we have received from our UX designers. You can change the button look but you should stick to Google trademark rules and policies: https://www.google.com/permissions/

but how?