Theme Configuration

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.

To configure Themes, perform the following steps:

1. Navigate to Admin > Basic > Infrastructure > Themes > Theme Configuration.
   The Theme Details page is displayed.
   Figure: Theme Details
   

2. In Create custom theme, select one of the following options:

   Field	Description
   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.

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

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

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

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