Themes Designer

Learn to design branding, logos, colors, and fonts to the UI Theme

Last published at: September 25th, 2026

Navigate to Administration > UI Theme.  

 

The Themes page is rendered below.

 

Select the Actions menu to access the “Create, Design, Rename, Copy, Remove, and Apply Theme” features. You may select the UI Theme from the table and choose the “Design” menu option to modify the branding, logos, colors, and fonts. 

 

Action - Create New Theme.

Select Actions > Themes from the menu. A configuration pop-up window appears. Enter a UI Theme name, then click the Save button. 

 

The new UI Theme is created, and a confirmation message appears in the top-right corner. 

 

The page navigates to the UI Theme Designer, and the “Branding” configuration is displayed by default, as shown below. 

 

Action - Branding.

The following UI lets you customize UI branding. When the user logs in again, the application name and page title changes are reflected. Enter the application name and page title, then click the Save button. A confirmation message appears in the top-right corner. 

 

Action - Logos.

Use this feature to customize the application logo, login logo, and background image. 

Click the Choose File button to select an image (with the specified resolution and type) from your local folder. Click the Preview button to verify the UI Theme logo. Click the Upload button to confirm the upload. When the user logs in again, the changes are reflected. 

 

Action - Colors.

You can fully customize the UI color scheme using the following UI, which provides a real-time preview. 

 

Use the drop-down feature to select colors to customize the UI, including the 

  • Left Menu (text color, text hover color, background color, selected item background color, selected item text color) 
  • Top Menu (text color, text hover color, background color, selected item background color, selected menu separator color)
  • User Area (text color, text hover color, background color, selected item background color)
  • Display Area (page background color, heading color, tab text color, tab hover color, text color, controls primary text color, controls primary background color, controls secondary text color, controls secondary background color) 
  • Tables (header text color, header background color, header column active color, row text color, row background color, row hover color, row selected color, footer text color, footer background color) 

 

Here, the UI Left Menu Background Color is configured (for reference).  

 

During UI Theme customization, you can preview between the “Application Page” and “Login Page” using the Preview switch, as shown below.  

 

Scroll to the bottom of the page, then select the Save button to confirm the changes. 

 

On the Themes page, select the “Utils - Restore Default Theme” option to revert the changes to the default theme. 

 

Action - Fonts.

You can set the application font using the following UI. Click the drop-down to view the font list, then select a font. The application supports OTF and TTF font formats. You can also upload and configure custom fonts using the “Choose File” feature.