Configure Theme

Prev Next

Themes let you customize the look and feel of the application. You can personalize a theme by choosing colors, layouts, fonts, and font sizes to match your preferences. You can set the theme color to the company’s primary color or select from the predefined color palettes. After you configure a theme, you can apply it to update the application’s appearance. Applying a theme ensures a consistent style across the interface and enhances the overall user experience.

Note

Themes option is visible only when it is configured in the Role Template.

Global Tenant

The Global Tenant Theme enables centralized theme configuration and branding control across multiple tenants. It introduces the concept of a Global Tenant that can:

  • Define a default theme

  • Replicate configurations automatically to child (local) tenants

  • Eliminate repetitive theme configuration

  • Standardize branding (logo, color, text, etc.)

To configure Themes, perform the following steps:

  1. Navigate to Admin > Infrastructure > Themes > Theme Configuration.
    The Theme and Branding page is displayed.

    Figure: Theme And Branding Page

Theme And Branding page will have two Widgets

  • Default Theme Widget

  • Custom Theme Widget

Default Theme Widget

The Default Theme Widget allows you to view whether the default theme is applied to the application and check its status. If the status is Active, the default theme is applied; if Inactive, it is not. The Apply button is enabled when the default theme is applied; disabled when Inactive.

By default, the Default Theme displays the organization’s uploaded logo and its primary color (hex code).


Figure: Default Theme


Custom Theme Widget

To create custom theme, perform the following steps:

  1. Click Create Custom Theme in Custom Theme Widget.

    Figure: Themes And Branding - Create Custom Theme

  2. Specify the required fields in Create custom theme section.

Field

Description

Application logo

Upload the application logo which gets displayed in the header and login screen.

Favourite icon

Upload the favourite icon which appears on the top of the page.

Organisation title

Specify the Organisation title which appears on the top of the page.

Choose how you’d like to create your theme?

Use your brand assets (logo/primary color)

Apply your organization’s logo and primary color. By default, the radio-button is selected. Clickupload the logo to automatically apply its primary brand color to the Theme.

Note

Upload a logo in PNG, SVG, or JPEG format and the maximum file size allowed for upload is 100 MB.

Select from accessible color presets

Select from predefined, accessibility-compliant color combinations. The currently selected color is highlighted. You can select only one color at a time.

Use application logo for color extraction

Select this check box to extract logo directly from the Application Logo. If using the same branding:

  • No need to browse the logo again

  • System automatically uses the logo from the Theme/Application

  • Ensures consistent branding and reduces duplication

  1. In the Preview section, verify the color extracted from your logo or the predefined color you selected.

  2. Click Save and Apply to apply the theme to the application.

Preview

The Preview option enables you to view how the application interface will look with either the Standard or Contrast themes before applying them. This feature helps you make an informed choice by allowing them to compare readability, accessibility, and visual appearance without altering the actual theme settings.

Selecting the Use your brand assets (logo/primary color) radio button (which is the default option) enables you to select a logo by clicking or + Choose File button. Once you select a logo, the theme automatically applies the primary brand color extracted from the logo to the Primary color extracted in the Preview section.

Figure: Using brand guidelines

Click Edit to manually enter the hex code value, rather than using the color extracted from the logo.


Figure: Hex Code

After entering the hex code, click Apply to preview the theme in both the Standard and Contrast widgets. Select the respective widget to see how the theme will look in the chosen format.

To view the Standard theme, select the Standard widget and click Save and Apply.

Figure: Standard View

To view the Contrast theme, select the Contrast widget and click Save and Apply.

Figure: Contrast View

Use Cases

Let us understand the different use-cases for usage of Global Tenant Theme.

Use Case 1: Global Tenant Theme Created First

Scenario - A Global Tenant Theme is created before any Local Tenant has configured its own custom theme. Local Tenants do not have existing themes at the time the Global Theme is introduced.

What Happens - All Local Tenants automatically inherit the Global Tenant Theme. It is applied as their Default Theme without requiring any manual configuration.

Outcome - Each Local Tenant initially uses the Global Tenant Theme for a consistent look and feel across tenants. However, A Local Tenant can later create and apply its own Custom Theme even after inheriting the Global Theme.

To create Local Tenant Theme, perform the following steps:

  1. Navigate to Admin > Infrastructure > Themes > Theme Configuration. The Theme and Branding page is displayed.

    Global Theme is active under Default Theme.

  2. Click Create Custom Theme Widget.

    System pre-fills values from Global Theme.

  3. Edit branding (logo, colors, text, etc.).

  4. Click Save and Apply. The Local Tenant Theme configuration is saved.

Use Case 2: Local Tenant Already Has Custom Theme

Scenario - A Tenant already has a Local Custom Theme applied to meet its specific branding and visual requirements. An administrator later creates or enables a Global Tenant Theme to standardize branding across multiple tenants.

What Happens - The newly created Global Tenant Theme does not override or replace the existing local settings. The Tenant’s existing Local Custom Theme remains active and unchanged.

Outcome - The Tenant continues to use its Local Custom Theme despite the availability of a Global Tenant Theme. However, A tenant can still create and apply a Global Theme after a Custom Theme exists.

To create Global Tenant Theme, perform the following steps:

  1. Navigate to Admin > Infrastructure > Themes > Theme Configuration. The Theme and Branding page is displayed.

    Global Theme is active under Default Theme.

  2. Click Global Theme Widget.

    System pre-fills values from Custom Theme.

  3. Edit branding (logo, colors, text, etc.).

  4. Click Save and Apply. The Global Tenant Theme configuration is saved.

Use Case 3: Automatic Theme Selection for Multi-Tenant Users Based on Tenant Name Order

Scenario - An administrator has configured distinct themes for four different tenants. A user has access to more than one tenant—for example, IT, HR, and Finance.

What Happens - When the user logs in, the system can display only one theme at a time. To determine which theme to apply, the system automatically checks the tenant names and selects one based on alphabetical ordering.

Outcome - Since Finance comes before HR and IT alphabetically, the system applies the theme configured for the FINANCE tenant, regardless of the user’s primary role or most frequently used tenant.