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.

Toggle between light and dark theme customization

Defaults

Default theme values

Property	Light Mode Default	Dark Mode Default
Container background color	`#FFFFFF`	`#383838`
Container max width	`300px`	`300px`
Header font family	`Helvetica`	`Helvetica`
Body font family	`Helvetica`	`Helvetica`
Header text color	`#222222`	`#F3F3F3`
Body text color	`#222222`	`#F3F3F3`
Input box border radius	`5px`	`5px`
Input box background color	`#FFFFFF`	`#4B4B4B`
Primary button border radius	`5px`	`5px`
Primary button background color	`#121212`	`#121212`
Primary button text color	`#F3F3F3`	`#F3F3F3`
Primary button hover color	`#4D4D4D`	`#4D4D4D`
Primary button border color	`#121212`	`#121212`
Primary button border width	`0px`	`0px`
Secondary button border radius	`5px`	`5px`
Secondary button background color	`#FFFFFF`	`#FFFFFF`
Secondary button text color	`#222222`	`#222222`
Secondary button hover color	`#D7D7D7`	`#D7D7D7`
Secondary button border color	`#D7D7D7`	`#D7D7D7`
Secondary button border width	`0px`	`0px`

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".

Element Customization Page with 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.