Comment on page
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.
You can customize the UI for many pieces of the
<passage-register>Passage Elements for each of your Passage Apps directly in Console.
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
The default values for each theme defined in console are:
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.