Customization

​

Customization Options for UI Components

Corbado provides the following customization options:

• 1. Custom translation
• 2. Custom styling

Customization options are configured in the CorbadoProvider.

​

1. Custom translations

Custom translations can serve two main purposes:

• Support other languages
• Customize the standard texts of the components

For both cases, you add your custom translation by creating your own translation file. To see the structure of a translation file, please take a look at our default translations for “en” here.

By setting the autoDetectLanguage to true in the CorbadoProvider component, the component can automatically detect a user’s browser language and adjust all wordings accordingly. If a language is not supported by Corbado yet, the component will default to “en”.

const en = {
    signup: {
        "signup-init": {
            "signup-init": {
                header: "Let's create an account",
                subheader: "to check ",
                text_login: "Would you like to login? ",
                button_submit: "Sign up",
                textField_fullName: "Full Name",
                text_divider: "or use social logins"
            }
        }
    },
    login: {
        "login-init": {
            "login-init": {
                header: "Please login",
                subheader: "to check ",
                text_signup: "Would you like to create an account? ",
                button_signup: "Sign up",
                button_submit: "Login"
            }
        }
    },
    passkeysList: {
        button_createPasskey: "You can create passkeys here.",
        field_credentialId: "ID: ",
        field_status: "Status of Passkey: "
    }
};

export default en;

To use this translation now, supply it to the CorbadoProvider.

​

2. Custom styling

Corbado offers multiple ways to customize the styling of the UI components. You can adjust the styling through the following settings:

• 2.1 Configuring dark-mode
• 2.2 Switching the theme
• 2.3 Creating a custom theme

​

2.1 Configuring dark-mode

For every theme, there is styling for dark and for light mode. Which of these themes is applied depends on your configuration for the darkMode parameter in the CorbadoProvider.
You can set the darkMode to on|off|auto. If set to auto the darkMode setting will be derived from the browser.

​

2.2 Switching the theme

Currently, Corbado offers two themes out of the box:

• default
• emerald-funk

You can pass the theme to the CorbadoProvider theme setting. If no setting is passed, the default theme is used. Currently the only alternative theme is emerald-funk.

​

2.3 Creating a custom theme

If you need more customization, you can create your own theme. To do so, create one parent CSS class named after your theme (e.g. “your-custom-theme”).

Inside this class you can now overwrite all the Corbado classes. Every Corbado class is prefixed with “cb-” so you can easily identify them.

.your-custom-theme {
    --cb-box-color: #3f465d;
    --cb-primary-color-hover: #1145df80;
    --cb-primary-color-disabled: #6f7486;
    --cb-script-text-color: #d0d9f5;
    --cb-box-color-hover: #525d83;

    .cb-container {
        width: 500px;
    }

    .cb-error-popup {
        gap: 1rem;
        padding: 2rem 3rem;
    }
}

Finally, configure the CorbadoProvider component to use the theme.

​

FAQs

​

Dark mode customizations not loading in production

This can happen if your custom CSS is loading before the .cb-dark class from the Corbado package is loaded by the browser. It can be fixed by increasing the specificity of the custom class like with .cb-dark.your-custom-theme

​

Icon colors not applied in web-js package when using <script /> tag

We use the windows.atob function which decodes a string of Base64-encoded data into bytes. This is used to convert Base64 SVG images to HTML SVG elements and then apply custom styling to them. In case of using web-js package with inline <script /> tag this is not allowed by the browsers and thus customised colors cannot be applied to SVGs for now in these types of applications.