UI Theme

Learn how to create a user interface theme that captures the look and feel you want for your FlowWright application.

Last published at: January 3rd, 2025

You'll need to navigate to the Adminstration - UI Theme menu.  

 

The page is rendered below.

FlowWright UI can be fully customized using the UI Theme options:  

 

Application logos

FlowWright uses two logos, one for the login screen and the other within the application. You can customize these logos by navigating to the Administration—UI Theme menu option. 

 

The UI Theme page is rendered as follows: Click on the Choose File button to select an image (resolution and type as specified) from the local folder. Click on the Preview button to verify the UI Theme logo. Click on the Upload button to confirm the action. 

 

UI Theme Menu

Use the menu option to brand FlowWright, create logos, colors, and fonts, and save the changes as your custom UI theme. Click the Choose File button to select an image (resolution and type as specified) from the local folder. Click on the Preview button to verify the UI Theme logo. Click on the Upload button to confirm the action. 

 

UI Branding

The following UI allows for full customization of UI branding. When the user logs in again, the application name and page title changes are reflected.

 

UI Color Scheme

UI color scheme can be fully customized using the following UI with a real-time view. 

 

Use the drop-down feature to select the colors to customize the UI Left Menu, Top Menu, User Area, Display Area, and Tables. 

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

 

Scroll to the bottom of the page and select the Save button to confirm the changes. Select the Restore Default Theme button to revert the changes to the default theme. 

 

Fonts

Application font can be set using the following UI:

 

Custom fonts can be uploaded and configured, too. 

 

Save as Theme

Navigating to the Actions—Save Theme As menu option allows you to save the current theme as a custom theme. 

 

Provide a name for the theme and click Save to confirm. 

 

The theme is saved and a confirmation alert is displayed in the top-right end corner. 

 

Load Theme

Navigating to Actions—Load Theme—select System or Custom menu option allows you to load and apply a system or custom theme. 

 

Select the theme to load from the drop-down list. Click on the Preview button to verify the UI theme. Click on the Load button to confirm the action.  

 

Export UI Theme

Exports the selected theme as an XML file by navigating to the Export - Theme menu option. 

 

Import UI Theme

Imports the selected theme as an XML file by navigating to the Import - Theme menu option. 

 

Click the Choose File button to select the Theme from the local folder. Click Import to confirm the action. This action shall overwrite the current theme in use.