Customize With Console
Learn how to customize the UI for <passage-auth>, <passage-login>, and <passage-register> elements to match your company's branding right from Console, no code needed.
Customizing the Element UI in Console
You can customize the UI for many pieces of the <passage-auth>, <passage-login>, and <passage-register>Passage Elements for each of your Passage Apps directly in Console.
<passage-profile> and <passage-passkey-table> do not support customization through Passage Console. To customize these elements use CSS variables and parts.
Light and Dark Theme
The elements support customization of both the light and dark theme. You can customize the element's appearance individually for each theme and see a preview of the result of the customizations.
To help make consistent designs in the light and dark theme the console editor automatically keeps non-color values the same across both themes. If there are different non-color values you want to apply on a per-theme basis we recommend styling your themes with CSS.
Defaults
The default values for each theme defined in console are:
| Property | Light Mode Default | Dark Mode Default |
|---|---|---|
Container background color |
|
|
Container max width |
|
|
Header font family |
|
|
Body font family |
|
|
Header text color |
|
|
Body text color |
|
|
Input box border radius |
|
|
Input box background color |
|
|
Primary button border radius |
|
|
Primary button background color |
|
|
Primary button text color |
|
|
Primary button hover color |
|
|
Primary button border color |
|
|
Primary button border width |
|
|
Secondary button border radius |
|
|
Secondary button background color |
|
|
Secondary button text color |
|
|
Secondary button hover color |
|
|
Secondary button border color |
|
|
Secondary button border width | |
|
Reset to Defaults
If you'd like to reset the styles back to the original light and dark theme defaults, make a change in one of the fields and select "Reset to default".
CSS Variable Hierarchy
All changes to element styling made in Console will be overridden by any CSS in your code. If you need to customize the elements beyond what is available in Console, we recommend only customizing with CSS. Learn how to customize the elements with CSS in your own code here.
Last updated
