Visual customization

Customize your B2CORE UI appearance by enabling light and dark themes, uploading logos and backgrounds, adjusting colors, and adding custom scripts for branding and functionality

Use the options in this section to customize the appearance of your B2CORE UI to reflect your brand’s unique style.

Key points

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 required 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 required format: SVG with transparent background.


Logo for dark theme

The main logo displayed in the B2CORE UI when the dark theme is enabled.

The required 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 required 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.

Expand to view custom settings
Visual customization — Fields
Visual customization — Fields

The following color settings for various elements of your B2CORE UI can be customized:

Only 6- or 8-character hexadecimal color codes are supported.

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",
"optional-external-bg-size": "cover",
"optional-external-bg-repeat": "no-repeat",
"optional-external-bg-attachment": "fixed"
}

"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?