Table of Contents

Theming & CSS

The React shell exposes a small surface of CSS custom variables and branded image paths for per-customer theming. No code changes are needed — drop a CSS file overriding the variables, set two env vars for the logo and welcome image, and the shell picks up the changes on the next page load.

Related docs.
Menus — the menu chrome these CSS variables affect.
Localization — translations (separate concern from theming).
MibCmsFrontEndServerBaseConfig — the configuration keys for logo and welcome image.

Colors — CSS custom variables

The React shell defines every theme-tunable color as a CSS custom variable on :root. Override them in a customer stylesheet to rebrand the UI without forking the framework.

Most common variables:

:root {
  --color-highlight:            #F2B303;        /* primary brand accent (selected nav, active tabs) */
  --color-highlight-secondary:  #44444455;      /* hover background on accent surfaces */
  --color-mib-title:            #000;           /* the top-bar logo + product title */
  --color-title:                #262626;        /* page headings */
  --color-primary-background:   #fff;           /* main content background */
  --color-secondary-background: #fafafa;        /* cards, panels */
  --color-tertiary-background:  #d9d9d9;        /* borders, dividers */
  --color-page-background:      rgb(0 0 0 / 15%); /* modal/dialog backdrop */
}

The variables are applied across the shell's stock widgets and honoured by federated remote widgets that use the same variable names. Customer-shipped widgets are expected to use these variables rather than hard-code colors — that's what keeps the rebrand single-source.

Logo and welcome image

Customize the logo and welcome image via two env vars on the FrontEnd Server. Both accept a relative path that gets concatenated with the configured root URL.

MIBCMSFRONTENDSERVERBASECONFIG_THEME_LOGO=MibFront/ux/img/logos/custom-logo.svg
MIBCMSFRONTENDSERVERBASECONFIG_THEME_WELCOMEIMAGE=MibFront/ux/img/custom-background.svg

The relative paths are concatenated with MIBCMSFRONTENDSERVERBASECONFIG_DEFAULT_ROOTURL to produce the final URL the shell loads.

Example. If the root URL is MIBCMSFRONTENDSERVERBASECONFIG_DEFAULT_ROOTURL=https://samples.mediaibox.com.br/, the final path for the logo is https://samples.mediaibox.com.br/MibFront/ux/img/logos/custom-logo.svg.

Drop the actual SVG files into the customer customisation overlay (or any path served by the customer's static-file host) so that the constructed URL resolves.

Where to put the stylesheet

Customer-shipped CSS is served from the customer's federated remote or from a static-file overlay on top of the React shell's nginx image. Two practical patterns:

  1. In a federated remote. Ship a CSS file as part of the remote's build output; import it at the top of src/main.tsx. The shell loads it on first remote activation.
  2. As a separate <link> injected by nginx. Configure the shell's nginx container to inject a <link rel="stylesheet" href="/customer-theme.css"> into the served HTML, and serve the stylesheet from a customer overlay.

Either pattern keeps the framework unchanged.

Inspecting active values

Open the shell, open DevTools → Elements → :root. The computed custom-property values are listed in the Styles panel. Changing them live in DevTools previews the rebrand without a deploy.

See also

Edit this page