Visual customization

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

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, file size up to 10 MB.

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, file size up to 10 MB.

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, file size up to 10 MB.

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, file size up to 10 MB.

Favicon (.ico)

The small icon shown in the browser tab.

The required format: ICO, file size up to 10 MB.

Favicon (.svg)

The vector version of the favicon for browsers that support SVG.

The required format: SVG, file size up to 10 MB. Will be used as a scalable icon.

Apple touch icon

The icon displayed on Apple devices when the B2CORE UI page is added to the home screen.

The required format: PNG, 180×180 pixels, file size up to 10 MB.

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: SVG, JPG, or PNG, file size up to 10 MB.

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: SVG, JPG, or PNG, file size up to 10 MB.

Admin Panel images

In this section, you can upload the images displayed in the Back Office (the recommended format: JPG, PNG, or SVG, file size up to 10 MB):

• Logo menu — the logo displayed in the Back Office main menu
• Login page logo — the logo displayed on the Back Office sign-in page
• Login page background — the background image applied to the Back Office sign-in page

Color Scheme

On this page, customize color settings for the light and dark themes of your B2CORE UI.

In the Brand Configuration section, you can quickly set up your brand identity by specifying the Brand color and enabling the Tinted backgrounds option, which applies a subtle tint of the brand color to interface backgrounds.

The color settings for individual interface elements described below are available in the Advanced color settings section.

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 dark theme as the default if both themes are enabled.

The advanced color settings are organized into the Semantic Tokens V1 (Light / Dark) and Semantic Tokens V2 (Light / Dark) sections, allowing you to customize each color token separately for the light and dark themes. To reset the color tokens to the values derived from your brand color, click the Reset colors from brand button.

The Semantic Tokens V1 (Light / Dark) section includes the following token groups:

• Accent — accent, accentHover, accent40, accent10, demo
• Status — positive, positive20, medium, medium20, negative, negative20
• Surface — background, background96, card, field, disabled, overlay, tooltip, divider
• Text — textMain, textSecondary, textSecondary40, textContrast

The Semantic Tokens V2 (Light / Dark) section includes the following token groups:

• Accent — brand, brandSubtle, brandMuted, alternative, alternativeSubtle, alternativeMuted, positive, positiveSubtle, positiveMuted, medium, mediumSubtle, mediumMuted, negative, negativeSubtle, negativeMuted, neutral, overlay, overlaySubtle, overlayMuted
• Character — onSurface, onSurfaceSecondary, onSurfaceInverse, onBrand, onAlternative, onPositive, onMedium, onNegative, onNeutral, onOverlay, onSurfaceBrand, onSurfaceAlternative, onSurfacePositive, onSurfaceMedium, onSurfaceNegative, onSurfaceOverlay
• Surface — surfaceLow, surface, surfaceHigh, surfaceHighest, surfaceInverse, backdrop
• Outline — outline, outlineStrong
• State — stateHovered, statePressed, stateHoveredInverse, statePressedInverse, stateDarken, stateDarkenStrong

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.

Fields

On this page, you can specify additional customization fields.

Project name

The name of your project displayed in the B2CORE UI.

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.