Welcome to How We Roll! This series is meant to help product owners, developers, and security professionals understand exactly how we implement (or, roll) authentication at Clerk.
When you build your brand, you spend hours making sure every color, font, and logo is exactly how you envisioned. When you integrate with a 3rd party product like Clerk, you want to make sure that your brand shines. Clerk empowers developers by offering:
In this chapter we are going to be talking about how to customize our drop-in components and why we wanted to treat it as a first class experience. Grab a drink and enjoy a deep dive into our appearance property.
When Clerk introduced customization, we wanted something that wasn’t an afterthought where only minimal items could be changed, like buttons or primary colors. We wanted developers to go as deep as required, and the appearance property allowed this by letting developers:
The baseTheme allows a developer to create a theme for your brand, and can be reused across multiple projects. We provide a package called @clerk/themes that allows you to use prebuilt versions that were crafted by Clerk, like our dark theme or shades of purple:
The default layouts for Clerk’s sign in and sign up components show the social buttons at the top, with other forms of authentication, like email, below. In similar fashion, when a user signs up for your application, by default, we show the optional fields. For some applications this makes sense, for others, not so much.
This is where our layout property can be used. Developers can move social providers, change the default look of the social buttons, hide optional fields, show links to help, privacy policy, and terms and conditions pages, and much more:
Not every application needs its own theme; it is possible to extend the Clerk baseTheme to fit with an application. Examples include globally setting some of the attributes, such as every primaryButton element having a green background and the text inside being yellow, or setting all text colors to the company’s brand color.
All of this can be done at the ClerkProvider level, allowing developers to speed up the customization of our components:
Applications are built of components, and individual components may need to be styled in a specific way. For example the Clerk <UserButton /> might be too small for your sidebar or navigation bar, or the <UserProfile/> may not need to show the sidebar.
You can apply the appearance property directly to individual Clerk components:
We’ve talked a lot about the parts that make Clerk customization a first class experience, but the powerful parts are variables and elements. Whether you are globally styling or styling individual components, variables and elements are essential.
The variables property is used to adjust the general styles of the base theme, like colors, backgrounds, typography:
The elements property is used for fine-grained theme overrides, and is useful when styling specific HTML elements. You can find the element to target by inspecting the HTML and looking for the class name.
Clerk allows for extensive customization when integrating with third-party products, ensuring brand elements are upheld. Developers can customize individual components, control the layout, modify the global appearance, create custom themes, and adjust the style of base themes through the appearance, baseTheme, layout, variables, and elements properties, ensuring the brand's unique design and user experience are reflected in every interaction.
For an in-depth look at how to leverage the full power of customization with Clerk, check out the Component Customization docs.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。