Element Themes

Learn how to set and customize the light and dark themes on the Passage Elements.

Light and dark themes

All Passage Elements support a default light and dark theme. These themes allow your element to easily support light and dark device settings out of the box.

The current theme of the element can be set by setting the theme attribute on the HTML tag:

<passage-auth theme="dark"></passage-auth>

The supported values for the theme attribute are:

theme="light" - Sets the element light theme.
theme="dark" - Sets the element dark theme.
theme="auto" - The element will use the browser/operating system setting to toggle between light and dark themes.

If no theme attribute is present on the elements, then the light theme will be shown by default.

Customizing themes with CSS variables

All of our supported CSS variables can be used to further customize the themes. See a full list of supported CSS variables

Overwrite any theme

If the rule is scoped to a Passage Element with no additional selector it will overwrite the value in any theme setting. This can be useful when you are only using one theme or you want to make changes that apply to any theme.

passage-auth,
passage-profile {
    // These rules will apply to all themes
    --passage-header-font-family: "Courier New";
    --passage-body-font-family: "Courier New";
}

Targeting a specific theme

If you want to apply a rule to a single theme, the CSS attribute selector can be used to scope a CSS variable definition to the elements only when that theme is applied.

passage-auth[theme='light'],
passage-profile[theme='light']{
    // These rules will apply to just the light theme
    --passage-container-background-color: white;
    --passage-body-text-color: black;
}
 
passage-auth[theme='dark'],
passage-profile[theme='dark']{
    // These rules will apply to just the dark theme
    --passage-container-background-color: black;
    --passage-body-text-color: white;
}

Styling auto mode

If the element is set to auto theme mode then it will apply the light or dark theme based on whether the browser and OS are set to light mode or dark mode. CSS variables can be scoped to automatically change values based on the same setting by using a prefers-color-scheme media query.

{`@media (prefers-color-scheme: light) {
    passage-auth[theme='auto'],
    passage-profile[theme='auto']{
        // These rules will apply to the light theme when the OS is set to light mode
        --passage-container-background-color: white;
        --passage-body-text-color: black;
    }
}
 
{`@media (prefers-color-scheme: dark) {
    passage-auth[theme='auto'],
    passage-profile[theme='auto']{
        // These rules will apply to the dark theme when the OS is set to dark mode
        --passage-container-background-color: black;
        --passage-body-text-color: white;
    }
}

Styling with CSS parts

The elements also support deep customization through CSS parts. Just like the CSS variables, CSS attribute selectors and media queries can be used with parts to target any theme, just a single theme, or auto-set themes.

passage-auth::part(button) {
    // These rules will apply to all themes
    background-color: black;
}
 
passage-auth[theme='light']::part(button){
    // These rules will apply to just the light theme
    background-color: black;
}
 
{`@media (prefers-color-scheme: light) {
    passage-auth[theme='auto']::part(button){
        // These rules will apply to the light theme when the OS is set to light mode
        background-color: black;
    }
}

You can also set the theme for the hosted login page in the Passage Console. Learn how to set the theme of the hosted login page.