Set theme for web application  

The following is an example of a theme with sections and their components in separate panels in your browser.

1. Edit 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:

• Company Logo

• App Icon

• None
  
  
  
  
  

  Note: Company Logo will be available only when it is uploaded In Company Details .

  
  

5. You can also select the placement of the company logo. It can either be placed on the left of the company 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 (Company 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.

  Note: A maximum of 30 custom colors can be added to your Creator account.

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. Edit 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:

• Company Logo

• App Icon

• None
  
  

  
  

  

  Note: Company Logo will be available only when it is uploaded in the Company Details .

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 (Company 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.

  Note: A maximum of 30 custom colors can be added to your Creator application.  

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. Edit 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:

• Company Logo

• App Icon

• None
  
  

  
  
  

  

  Note: Company Logo will be available only when it is uploaded in the Company Details .

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 (Company 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.

  Note: A maximum of 30 custom colors can be added to your Creator application.

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.