Skip to main content
Skip table of contents

Theme

This page explains how to configure the visual theme of the portal and login pages.

You can:

  • Define reference colors. These colors guide the styling of various page elements.

  • Customize interface elements.

  • Upload logos.

  • Add optional background images and CSS.

You can configure the theme colors in the following ways:

  • Use a straight CSS color in hexadecimal format (e.g., #fda3b6)

  • Reference one of the defined theme colors (e.g., @accent)

  • Apply a SASS directive that may include a reference color (e.g., darken(@accent, 10%))

You can also use the available predefined templates and customize each component individually.

Configuration

Open the Configuration Interface

To access the configuration, go to Customization → Theme in the Admin Portal.

In the dropdown at the top of the editor, select Standard to configure the theme.

image-20250716-140622.png

Standard selection

Saving Changes

The theme customization editor does not save changes automatically.

Click Update before closing the editor or navigating away.
If you leave the page without clicking Update, the system will discard all your changes.

image-20250716-154626.png

Use a Template (Optional)

You can either start with a template or manually adjust each configuration area.

If you want to reuse an existing theme template, open the Choose an existing template dropdown. By clicking on the Preview button, you can see how the theme will appear.

image-20250716-141249.png

Template selection

Theme configuration includes three expandable sections:

  • Common: Reference colors

  • Portal: Identity Management (IM) interface customization

  • Login Pages Portal: Access Management (AM) interface customization

image-20250716-143047.png

Theme customization sections


Set Reference Colors (Common)

If you choose to manually customize the portal, you can define the reference colors for the main elements in the Common section. Each reference color must be a valid CSS color value.

image-20250716-144509.png

Reference colors

Color Fields and Where They Apply

Reference Color

Where It Applies

Background

Page background. Usually white or near-white.

Text

Text color. Usually black or near-black.

Accent

Allows to add color to certain UI elements, such as highlighting a menu item on hover.

Accent Text

Sets the contrast text color on elements that use the accent color, such as text on the highlighted items.

Primary

Primary color of the UI backgrounds.

Primary (contrast)

Sets the contrast text color on the primary color.

Secondary

Secondary color of the UI backgrounds.

Secondary (contrast)

Sets the contrast text color on the secondary color.

Ternary

Ternary color of the UI backgrounds.

Ternary (contrast)

Sets the contrast text color on the ternary color.

You can hover over the question mark next to each field in the Admin Portal to see which part of the portal the color applies to.


Customize the Portal Look (Portal)

Use the Portal section to adjust the visual style of the admin and user portals.

Customizing the Colors

After defining the reference colors in the Common section, use them to customize the portal. To do this, click one of the following buttons to the right of each field:

  • Color - Enter a CSS color.

  • Ref - Reference a defined color (e.g. @accent)

  • SASS - Use a SASS directive (e.g. darken(@accent, 10%)).

image-20250716-151700.png

Portal colors customization

Color Fields and Where They Apply on the Portal

Theme Color

Where It Applies

Text color

Page titles (H1) text color

Page body background

Changes the background color of the portal. Does not affect the color of the block on top

Brand (accent)

Color of clickable tabs and primary buttons

Brand (texte)

Text color on primary buttons

General background

Background color of the side menu on the left and of the footer

Header background

Background color of the header on top of the page

Header search text

Color in the upper panel header for the text in the search field and header tabs

Header icons

Header icons color

Header dropdown background

Not used

Header dropdown text

Not used

Breadcrumb background

Not used

Breadcrumb text

Not used

Side menu text (hover)

Text color for items hovered in the side menu and for the footer label at the bottom of the page

Side menu text (active)

Text color for selected items in the side menu

Side menu background (hover)

Background color for when you hover over a main tab in the side menu

Side menu background (active)

Background color for selected items in the side menu

Side menu divider

Not used

Side submenu text

Text color for sub-tabs in the side menu

Side submenu background (hover)

Background color for hovered sub-tabs in the side menu

Page border color

Color of the side and bottom borders

Portlets border color

Border color of the main content boxes.

You can hover over the question mark next to each field in the Admin Portal to see which part of the portal the color applies to.

Upload the logo in Customization - Assets - Create by clicking “Drop Here” or using drag and drop.

image-20250716-152556.png

Upload a logo to Assets

Then, in Customization - Theme, you can select the uploaded logo from the dropdown list.

Logos must be in GIF, PNG, or JPEG format and under 50KB. You can also add CSS styles directly to the Logo Style using the style attribute.

image-20250718-084610.png

Select the logo from Assets

The main logo appears on the left side of the banner in both the admin and user portals.


Style the Login Pages (Login Pages Portal)

The Login Pages Portal theme defines the visual appearance of the tenant authentication pages.

After saving, theme changes applied to the login pages may take up to two minutes to appear on the tenant.

You can configure the following elements:

Set Theme Colors

Define the colors used for:

  • Primary and secondary buttons

  • Text

  • Highlights

Click the corresponding blue button to enter:

  • A CSS color value (e.g. #23a327)

  • A reference to a defined color (e.g. @accent)

  • A SASS directive (e.g. darken(@accent, 10%))

image-20250716-153108.png

Theme colors customization

Add a Logo

Upload the logo in Customization - Assets - Create by clicking “Drop Here” or using drag and drop.

Then, under Login Pages Logo, select the desired logo from the dropdown menu. You can apply inline CSS to the logo (for example, to adjust size or alignment).

image-20250716-153356.png

Upload the logo to the login pages

Add a Background Image

Upload the image in Customization - Assets - Create by clicking “Drop Here” or using drag and drop.

Then, under Login Pages Background Image Customization, select the desired image from the dropdown menu. You can apply inline CSS to control image size, position, or opacity.

image-20250716-153903.png

Upload the background image to the login pages

Write Custom CSS

Use custom CSS to override or extend the login page styling.

Enter your CSS directly into the Login Pages Global CSS Customization field. The system injects this as a <style> block into the login page.
Any rules you define will override the existing theme styles.

image-20250716-154224.png

Write custom CSS

Accessibility and Contrast Guidance

Make sure your color choices provide sufficient contrast.
To meet accessibility standards, each element should be AA-compliant according to the Web Content Accessibility Guidelines (WCAG).

You can check contrast using tools such as:

Also consider different types of visual impairments when selecting your color palette.
These tools can help:

  • Who Can Use – test accessibility across user contexts

  • Colorblind Simulator – simulate how your palette appears to users with various types of color blindness

Read Next

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.