Customization
Discover how you can customize your UI components to align with your preferences and needs.
Customization Options for UI Components
Corbado provides the following customization options:
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
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.
If you want to change the styling of a particular part of the UI components but you don’t know the classname, just use your browser’s “inspect” tool from the developer tools.
.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.