Visual customization
Use the options in this section to customize the appearance of your B2CORE UI to reflect your brand’s unique style.
Key points
The available options enable you to:
Select whether you want to enable the light theme, dark theme, or both for your B2CORE UI, and choose which one should be set as the default.
Upload custom logos for both themes of your B2CORE UI.
Adjust the colors of various UI elements for both light and dark themes.
Set and update background images for the Sign In and Sign Up pages of the B2CORE UI.
Add custom scripts, for example, for chatbot integration and analytics tracking.
Resources
On this page, you can upload or modify the logos displayed in your B2CORE UI, as well as background images for the Sign Up and Sign In pages , if needed.
Logo for light theme
The main logo displayed in the B2CORE UI when the light theme is enabled.
The recommended format: SVG with transparent background.
Short logo for light theme
A compact version of the logo displayed when the main menu is collapsed in the light theme.
The recommended format: SVG with transparent background.
Logo for dark theme
The main logo displayed in the B2CORE UI when the dark theme is enabled.
The recommended format: SVG with transparent background.
Short logo for dark theme
A compact version of the logo displayed when the main menu is collapsed in the dark theme.
The recommended format: SVG with transparent background.
Favicon (.ico)
The small icon shown in the browser tab.
The required format: ICO.
Favicon (.svg)
The vector version of the favicon for browsers that support SVG.
The required format: SVG. Will be used as a scalable icon.
Light theme background
The background image applied to the Sign Up and Sign In pages when the light theme is enabled. Adding a background image is optional.
The recommended format: JPG or PNG.
Dark theme background
The background image applied to the Sign Up and Sign In pages when the dark theme is enabled. Adding a background image is optional.
The recommended format: JPG or PNG.
Fields
On this page, customize color settings for the light and dark themes of your B2CORE UI.
Light theme enabled
Select the checkbox to enable the light theme for the B2CORE UI.
Enable the Default option to set the light theme as the default if both themes are enabled.
Dark theme enabled
Select the checkbox to enable the dark theme for the B2CORE UI.
Enable the Default option to set the light theme as the default if both themes are enabled.
If neither theme checkbox is selected, your B2CORE UI will use the predefined light and dark themes from the B2BDemo design, and all custom color settings listed below will be ignored.
If both theme checkboxes are selected, both themes will be available to clients in the B2CORE UI, along with the applied custom color settings.
The following color settings for various elements of your B2CORE UI can be customized:
background
Sets the primary background color for the interface.
background-96
A subtly lighter background layer (typically 96% opacity) used in UI elements such as pagination controls.
card
Defines the background color for card elements, such as wallet or account cards.
field
Sets the background color of input fields and form elements.
disabled
Specifies the color used for disabled elements, indicating inactive or unavailable options.
overlay
Defines the background color used in overlays such as modals or loading screens.
text-main
Defines the primary text color used throughout the B2CORE UI.
text-secondary
Sets the color for secondary text elements, such as hints, field labels, icon colors, or other less prominent content.
text-secondary-40
Specifies a 40% opacity color for secondary text, usually applied to text that needs to appear less prominent.
divider
Defines the color for dividers or borders between sections, providing separation and structure within the interface.
accent
Sets the color for buttons.
accent-hover
Specifies the hover color for buttons.
accent-10
Defines a lightened version of the accent color (10% opacity), often used for as a background for accent elements.
accent-40
Specifies a darker or more intense version of the accent color (40% opacity).
demo
Sets the color used for chart visualizations, typically to represent data within graphs.
negative
Sets the color for error-related text, negative growth indicators, and elements like snackbars or messages alert clients to issues.
negative-20
A lighter variation of the negative color, typically used as a background for indicating negative outcomes.
positive
Sets the color for success-related elements, positive growth indicators, and elements like snackbars or messages that convey positive outcomes.
positive-20
A lighter variation of the positive color, typically used as a background for indicating positive outcomes.
medium
Sets the color used for status indicators and data visualizations, such as charts.
medium-20
A lighter variation of the medium color, typically used as a background or to complement the medium color in status displays.
text-contrast
Sets the text color for elements with a dark background that remain unchanged regardless of the selected theme, such as hint text.
tooltip
Sets the background color for tooltips.
Additional light/dark theme variables (json)
Use this field to specify a JSON object with additional variables, such as those that define how a background image behaves in the respective theme:
"optional-external-bg-position": "0 0"
Positions the background image at the top-left corner.
"optional-external-bg-size": "cover"
Scales the background image to cover the entire page.
"optional-external-bg-repeat": "no-repeat"
Prevents the background image from repeating (tiling) in any direction.
"optional-external-bg-attachment": "fixed"
Keeps the background image fixed in place when the page is scrolled. It won't move with the content.
Scripts (js-script)
Add your JavaScript (JS) scripts here. These scripts will be executed automatically when the Sign Up or Sign In page is opened by clients.
Last updated
Was this helpful?
