Customizing @Connect
Make OpenInt Connect your Own by styling it to match your brand
Customization Options
All customization options are available on the frontend components or also on the createMagicLink API (see API Reference).
Themes
OpenInt offers a light and dark theme variant for @Connect. You can specify which theme to use or allow users to toggle between them.
Colors
All colors in the themes can be customized by passing them as parameters. Below is a table of all available color options with their default values in both light and dark themes:
| Style | Light Theme | Dark Theme |
|---|---|---|
| accent | #a5c4e2 | #4a5a78 |
| background | #ffffff | #1c1c1c |
| border | #d6d9e4 | #333333 |
| button | #8a5df6 | #8a5df6 |
| button_light | #f2ebff | #f2ebff |
| button_foreground | #ffffff | #f6f6f6 |
| button_hover | #a082e9 | #a082e9 |
| button_stroke | #8a5df6 | #7b4de0 |
| button_secondary | #ffffff | #242424 |
| button_secondary_foreground | #000000 | #f6f6f6 |
| button_secondary_stroke | #e6e6e6 | #999999 |
| button_secondary_hover | #efefef | #3d3d3d |
| card | #ffffff | #242424 |
| card_foreground | #2f2d3a | #f6f6f6 |
| foreground | #2f2d3a | #f6f6f6 |
| muted | #f2f2f2 | #ffffff19 |
| muted_foreground | #454545 | #999999 |
| navbar | #ffffff | #ffffff |
| popover | #ffffff | #242424 |
| popover_foreground | #2f2d3a | #f6f6f6 |
| primary | #2f2d3a | #f6f6f6 |
| primary_foreground | #e2e6f1 | #1c1c1c |
| secondary | #ffffff | #242424 |
| secondary_foreground | #2f2d3a | #f6f6f6 |
| sidebar | #ffffff | #ffffff |
| tab | #ffffff | #242424 |
Setting color overrides examples:
You can also do so via the Magic Link API
Setting Display Names for Connectors
You may want to set a display name for a connector so that instead of showing the connector’s name, the display name is shown.
For example, instead of ‘Plaid’ being shown you can configure it to say ‘US Bank Account’.
This can be done by setting the Display Name in the connector configuration section of the console.