Skip to main content
The SDK allows you to apply global customizations that affect all embeddable UIs. This is useful for maintaining a consistent look and feel across your application. The component level styles will take precedence over the global styles that change the same aspects of the UI.

​
Customization Options

The following global CSS properties are available:
CSS VariableDescription & Accepted Values
--qonto-embed-color-primaryAccepts any valid color value for primary brand color (e.g., #050505, rgb(5,5,5)). It will affect the color of the primary buttons.
--qonto-embed-content-color-primaryColor of the text. Accepts any valid color value for primary content text (e.g., #050505, rgb(5,5,5)).
--qonto-embed-content-color-primary-invertedColor of the text showing on top of filled backgrounds. Accepts any valid color value for inverted primary content text (e.g., #fff, rgb(255,255,255)).
--qonto-embed-content-successAccepts any valid color value for success state content (e.g., var(--success400), #22c55e).
--qonto-embed-content-warningAccepts any valid color value for warning state content (e.g., var(--warning400), #f59e0b).
--qonto-embed-content-errorAccepts any valid color value for error state content (e.g., var(--error400), #ef4444).
--qonto-embed-content-font-weightAccepts any valid font weight for content text (e.g., 400, normal).
--qonto-embed-content-font-sizeAccepts any valid font size for content text (e.g., 14px, 0.875rem).
--qonto-embed-content-line-heightAccepts any valid line-height for content text (e.g., 24px, 1.5).