# Visual customization Use the options in this section to customize the appearance of your B2CORE UI to reflect your brand’s unique style. {% hint style="success" %} ### 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. {% endhint %} ## 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. *** **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. ## 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. {% hint style="warning" %} 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. {% endhint %}
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: {% hint style="info" %} Only 6- or 8-character hexadecimal color codes are supported. {% endhint %} **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: ```json { "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.