Unable to change foregroundColor for authButtons

I’m using Lock for auth0 login and have customized the authButtons.
authButtons: {
“google-oauth2”: {
primaryColor: “#dc4c39”,
foregroundColor: “#ffffff”,
icon: “xxxx”
},
“windowslive”: {
displayName: ‘Office 365’,
primaryColor: “#3A5996”,
foregroundColor: “#000000”,
icon: “xxxx”
}
},
Icons & background colors update correctly, but foregroundColor remains unchanged. I tried overriding the class that was setting color, but it doesn’t seem to work either.
2021-04-27_14-58-23
As these are social connections, does something else need to be done?

Hi @rizwan.ahmed,

Unfortunately, the authButtons config is meant for customizing custom OAuth connections. The Lock library contains CSS rules for most established social connections such as Google:

.auth0-lock.auth0-lock .auth0-lock-social-button[data-provider^=google] .auth0-lock-social-button-text

Because the library uses !important, I don’t believe the text color can be overriden.

You may want to consider using a custom UI for complete control of style: Classic Universal Login Experience - Customization

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.