Search code examples
vmware-clarity

Clarity.Design: Customize Login Component


is there some tutorial explaining how to customize "Login" component? For instance using a custom background or align the form in different way?

Thanks


Solution

  • There are two parts to the answer for your question.

    THEMES (aka customizing your login svg image)

    You can customize the SCSS variable for login background: $clr-login-background. Take a look at how I added the dark theme svg here. This means that you will have to build the Clarity styles as part of your apps build process even though you are only customizing one of the themeable variables for Clarity SCSS. There is more information on custom themes here, in the docs. This info on building a custom theme is near the bottom of the page.

    LOGIN FORM

    For the specifics of the form you use in your app, you can add the pieces that make sense for your specs. There are styles for: .title, .subtitle, .username, .password, .error etc ...

    If you look at the example in the Login Page docs you can see how the form uses those elements and modify them for your use case.