Auth0 Home Blog Docs

customizing submission button text colors and background widget colors in Lock 10

lock-10
tier1
styles
lock-inline

#1
  1. Is it possible to specify a
    foregroundColor (or text color) for
    the primary “log in/sign up” using
    the Lock 10 API? If so, how?

    One would think that if you can
    specify the text color of the social
    media links (by leveraging
    "authButtons’connection’].foregroundColor"
    property), you should also be able
    to specify the text color of the
    main log in/sign up button.

  2. Similarly, is it possibly to specify/customize the background
    color of the main page/widget itself
    when the popup appears using the
    Lock 10 API?

    I looked at
    https://auth0.com/docs/libraries/lock/v10/customization
    and
    https://auth0.com/docs/libraries/lock/v10/ui-customization
    but the built-in styling options
    appear very limited. Moreover, the docs
    strongly discourage trying to use
    traditional CSS properties to customize the styling.


#2

Lock has limited customization options. If you need to use traditional CSS properties to customize of the login/sign up page, perhaps you’ll need to use a Custom UI. If you already check the customization options of Lock and still don’t find the style that you need, I recomend that you evaluate the use of auth0.js library (Check this comparizon table for this: https://auth0.com/docs/libraries/when-to-use-lock#when-to-implement-lock-vs-a-custom-ui)


#3