Set Theme for Web Application

1. Navigate to the edit mode of your application.
   
   
2. Click the Web icon in the top-left corner.
   
   
   
3. Click the Themes icon in the top-right corner.
   
   
   
4. The Themes tab will slide in from the right. From here, you can choose from the following:

• Layout
• Logo Preference
• Color Options
• Font
  
  

Choose Layout

1. Navigate to the edit mode of your application.
   
   
2. Click the Themes icon in the top-right corner. The Themes tab will slide in from the right.
   
   
3. Choose a layout from the given options under the Layout section.
   
   
   

Logo Preference

1. Navigate to the edit mode of your application.

2. Click the Themes icon in the top-right corner. The Themes tab will slide in from the right.

3. Click Logo Preference at the top-right corner of the Themes tab.

4. Choose a logo type:

• Organization Logo

• App Icon

• None
  
  
  
  

  Note: Organization Logo will be available only when it is uploaded in the Organization module.

  
  

5. You can also select the placement of the organization logo. It can either be placed on the left of the organization name or on top of it.
   
   
   

   

   Note: Logo placement applies to only certain layouts.

6. Click the Close icon on top-right in the Themes tab. The changes will be saved automatically.
   
   
7. The chosen Logo Preference (Organization Logo/ App Icon) will be displayed in the live mode of the application.
   
   

Color Options

1. Navigate to the edit mode of your application.


2. Click the Themes icon in the top-right corner. The Themes tab will slide in from the right.


3. Under the Colors section, you can either choose a color from the available preset colors or create a custom color for your application theme.




Note: Custom colors can be used across apps, layouts and, devices in your Creator account.


5. In the Custom Color tab, you can customize a color for Theme/Brand Color as well as supporting colors for App Header, Menu, and Sub-Menu.




Note: Some supporting colors might not be applicable for certain layouts and will be disabled.

6. Click the color-picker icon beside Theme/Brand Color and choose a color from the given presets or click More Colors and pick a custom color from the color palette and click OK.
     


Note :

• Theme/Brand color is used across application components, such as buttons, links, and dropdowns. 
• The color added here will be available to mobile and tablet devices automatically. However, you can also choose a different color for the respective devices if needed.
  
  

7. Similarly, you can choose supporting colors for the App Header, Menu and Sub-Menu.


8. Click Save. The colors will be applied automatically and it can be seen in the preview area.


9. To edit a custom color, hover over the chosen custom color and click the edit icon. Click Update after making the necessary changes.



10. To delete a custom color, hover over the custom color and click the cross icon. If there is no reference, the color will be deleted automatically.


11. If any of the applications has a reference of this color, the popup window will mention the same. In that case, you need to perform the following steps:

• Click VIEW on the right side of each of the application mentioned. The application will open in a new tab.
• Change the theme color to an alternate color.
• Go back to the reference popup (previous tab) and click the refresh icon on the top right corner of the Delete Color popup window.
• Click Proceed to Delete once all the references have been removed.

Choose Font

1. Navigate to the edit mode of your application.

2. Click the Themes icon in the top-right corner. The Themes tab will slide in from the right.

3. Under the Fonts section, select a font from the dropdown menu.
   

   Note: The user can select from a total of 12 different fonts.
   
   
   

4. The chosen font will be automatically applied across your application.

Set Theme for Phone

1. Navigate to the edit mode of your application.
   
   
2. Click the Phone icon in the top-left corner.
   
   
   
3. Click the Themes icon in the top right-corner.
   
   
   
4. The Themes tab will slide in from the right. From here, you can choose the following:

• Layout
• Logo Preference
• Color Options
• Font
  
  
  

Choose Layout

1. Navigate to the edit mode of your application.
   
   
2. Click the Themes icon in the top-right corner. The Themes tab will slide in from the right.
   
   
3. Choose a layout from the given options under the Layout section.
   
   

Logo Preference

1. Navigate to the edit mode of your application.

2. Click the Themes icon in the top-right corner. The Themes tab will slide in from the right.

3. Click Logo Preference on the top-right corner of the Themes tab.

4. Choose a logo type:

• Organization Logo

• App Icon

• None
  
  

  
  

  

  Note: Organization Logo will be available only when it is uploaded in the Organization module.

5. Click the Close icon at the top-right to close the Themes tab. The changes will be saved automatically.
   
   
6. The chosen Logo Preference (Organization Logo/ App Icon) will be displayed in the live mode of the application.
   

Color Options

1. Navigate to the edit mode of your application.


2. Click the Themes icon in the top-right corner. The Themes tab will slide in from the right.


3. Under the Colors section, you can either choose a color from the available preset colors or create a custom color for your application theme.

4. Click + under the Custom tab to create custom colors for different interface components.




Note: Custom colors can be used across apps, layouts and, devices in your Creator account.


5. In the Custom Color tab, you can customize color a for Theme/Brand Color and the supporting color for Dark Mode.



6. Click the color-picker icon beside Theme/Brand Color and choose a color from the given presets or click More Colors and pick a custom color from the color palette and click OK. The color will be added to the Customs tab.
     




Note: Theme/Brand Color is used across components like buttons, links, dropdowns, etc.

7. Similarly, you can choose a supporting color for the Dark Mode as well. 

8. You can toggle the button to fill the chosen color on the navigation bar on iPhone device. By default, this button will be toggled as No.




9. To edit a custom color, hover over the custom color and click the edit icon. Click Update after making the necessary changes.



10. To delete a custom color, hover over the custom color and click the cross icon. If there is no reference, the color will be deleted automatically.

11. If any of the applications has a reference of this color, the popup window will mention the same. In that case,

• Click VIEW on the right side of each of the application mentioned. The application will open in a new tab.
• Change the theme color to an alternate color.
• Go back to the reference popup (previous tab) and click the refresh icon in the top-right corner of the Delete Color popup window.
• Click Proceed to Delete once all the references have been removed.

Choose Font

1. Navigate to the edit mode of your application.

2. Click the Themes icon in the top-right corner. The Themes tab will slide in from the right.

3. Under the Fonts section, select a font from the dropdown menu.

   Note: The user can select from a total of 12 different fonts.

   
   

Set Theme for Tablet

1. Navigate to the edit mode of your application.
   
   
2. Click the Tablet icon in the top-left corner.
   
   
   
3. Click the Themes icon in the top right-corner.
   
   
   
4. The Themes tab will slide in from the right. From here, you can choose from the following:

• Layout
• Logo Preference
• Color Options
• Font
  
  
  

Choose Layout

1. Navigate to the edit mode of your application.
   
   
2. Click the Themes icon in the top-right corner. The Themes tab will slide in from the right.
   
   
3. Choose a layout from the given options under the Layout section.
   

Logo Preference

1. Navigate to the edit mode of your application.

2. Click the Themes icon in the top-right corner. The Themes tab will slide in from the right.

3. Click Logo Preference on the top-right corner of the Themes tab.

4. Choose a logo type:

• Organization Logo

• App Icon

• None
  
  

  
  
  

  

  Note: Organization Logo will be available only when it is uploaded in the Organization module.

5. Click the Close icon at the top-right to close the Themes tab. The changes will be saved automatically.
   
   
6. The chosen Logo Preference (Organization Logo/ App Icon) will be displayed in the live mode of the application.

Color Options

1. Navigate to the edit mode of your application.


2. Click the Themes icon in the top-right corner. The Themes tab will slide in from the right.


3. Under the Colors section, you can either choose a color from the available preset colors or create a custom color for your application theme.

4. Click + under the Custom tab to create custom colors for different interface components.




Note: Custom colors can be used across apps, layouts and, devices in your Creator account.

5. In the Custom Color tab, you can customize a color for Theme/Brand Color and a supporting color for the Dark Mode.



6. Click the color-picker icon beside Theme/Brand Color and choose a color from the given presets or click More Colors and pick a custom color from the color palette and click OK. The color will be added to the Customs tab.
     

Note: Theme/Brand Color is used across components like buttons, links, dropdowns, etc.

7. Similarly, you can choose a supporting color for the Dark Mode as well.

8. You can toggle the button to fill the chosen color on the navigation bar on iPad device. By default, this button will be toggled as No.



9. To edit a custom color, hover over the custom color and click the edit icon. Click Update after making the necessary changes.



10. To delete a custom color, hover over the custom color and click the cross icon. If there is no reference, the color will be deleted automatically.

11. If any of the applications has a reference of this color, the popup window will mention the same. In that case,

• Click VIEW on the right side of each of the application mentioned. The application will open in a new tab.
• Change the theme color to an alternate color.
• Go back to the reference popup (previous tab) and click the refresh icon on the top right corner of the Delete Color popup window.
• Click Proceed to Delete once the references have been removed.

Choose Font

1. Navigate to the edit mode of your application.

2. Click the Themes icon in the top-right corner. The Themes tab will slide in from the right.

3. Under the Fonts section, select a font from the dropdown menu.

   Note: The user can select from a total of 12 different fonts.
   

   
   

   
   

4. The chosen font will be automatically applied across your application.