Unable to change foregroundColor for authButtons

[rizwan.ahmed]

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.

As these are social connections, does something else need to be done?

[stephanie.chamblee]

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: Customize Classic Universal Login Pages