Set Theme for your Application | Applications | Zoho Creator Help

Set theme for your Application

Creator provides a bunch of theme layouts that you can choose from, as well as various colors and fonts that you can pick to go along with your chosen theme for web, phone, and, tablet modes. You can also customize color combinations for the application theme and icon. The logo of your application can now be placed as per your choice on the menu bar. Choosing all these different features also gives you a preview of your application with the applied options.

Set theme for web application  

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

To set a theme for your application when accessed in web browser mode:
  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:


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.
  1. Click the Themes icon in the top-right corner. The Themes tab will slide in from the right.
  1. Click Logo Preference at the top-right corner of the Themes tab.
  1. Choose a logo type:
  • Company Logo
  • App Icon
  • None


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

  1. 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.
  1. Click the Close icon on top-right in the Themes tab. The changes will be saved automatically.

  2. 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.
  1. Click the Themes icon in the top-right corner. The Themes tab will slide in from the right.
  1. Under the Fonts section, select a font from the dropdown menu.
    Note: The user can select from a total of 12 different fonts.


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


Set theme for phone

Below is an example of how the sliding pane theme looks like in an iPhone device. The sections and their components with the applied theme can be viewed by clicking the hamburger icon in the top-left corner of your device.


To set a theme for your application when accessed on a 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:

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.
  1. Click the Themes icon in the top-right corner. The Themes tab will slide in from the right.
  1. Click Logo Preference on the top-right corner of the Themes tab.
  1. Choose a logo type:
  • Company Logo
  • App Icon
  • None


    Note: Company Logo will be available only when it is uploaded in the Company Details .
  1. Click the Close icon at the top-right to close the Themes tab. The changes will be saved automatically.

  2. 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.
  1. Click the Themes icon in the top-right corner. The Themes tab will slide in from the right.  
  1. 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 tablet  

The following is an example of what the Bottom Bar theme looks like in an iPad device. The sections and their components can be accessed from the bar at the bottom of your device.


To set a theme for your application when accessed on a 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:

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.
  1. Click the Themes icon in the top-right corner. The Themes tab will slide in from the right.
  1. Click Logo Preference on the top-right corner of the Themes tab.
  1. Choose a logo type:
  • Company Logo
  • App Icon
  • None



    Note: Company Logo will be available only when it is uploaded in the Company Details .
  1. Click the Close icon at the top-right to close the Themes tab. The changes will be saved automatically.

  2. 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.
  1. Click the Themes icon in the top-right corner. The Themes tab will slide in from the right.
  1. Under the Fonts  section, select a font from the dropdown menu.
    Note: The user can select from a total of 12 different fonts.


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

  1. Understand Application Themes


    Zoho CRM Training Programs

    Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.

    Zoho CRM Training
      Redefine the way you work
      with Zoho Workplace

        Zoho DataPrep Personalized Demo

        If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.

        Zoho CRM Training

          Create, share, and deliver

          beautiful slides from anywhere.

          Get Started Now


            Zoho Sign now offers specialized one-on-one training for both administrators and developers.

            BOOK A SESSION





                        Still can't find what you're looking for?

                        Write to us:  support@zohoforms.com


                                



                            





                          Manage your brands on social media




                              Zoho Marketing Automation

                                Zoho Sheet Resources

                                 




                                    Zoho Forms Resources


                                      Secure your business
                                      communication with Zoho Mail


                                      Mail on the move with
                                      Zoho Mail mobile application

                                        Stay on top of your schedule
                                        at all times


                                        Carry your calendar with you
                                        Anytime, anywhere




                                              Zoho Sign Resources

                                                Sign, Paperless!

                                                Sign and send business documents on the go!

                                                Get Started Now





                                                        Zoho TeamInbox Resources



                                                                Zoho DataPrep Resources



                                                                  Zoho DataPrep Demo

                                                                  Get a personalized demo or POC

                                                                  REGISTER NOW


                                                                    Design. Discuss. Deliver.

                                                                    Create visually engaging stories with Zoho Show.

                                                                    Get Started Now










                                                                                          • Related Articles

                                                                                          • Understand Application Themes

                                                                                            Themes enable you to choose the color scheme and design that will be applied to your Creator application. They define the overall visual appeal of your application as well as assist users on how to navigate around the components in your application. ...
                                                                                          • Understand Application Sections

                                                                                            Sections display the components in your application in separate divisions. This provides your users with a visual and logical grouping of your application components, which makes navigation easier. When you access your Creator application, you will ...
                                                                                          • Modes of an Application

                                                                                            Overview Zoho Creator has two modes through which you can establish an application from start to finish. You can create an application from scratch or from a template and customize it according to your needs in an app-building space. During that ...
                                                                                          • Set description

                                                                                            Set descriptions for fields using tooltips and help texts Applicable to the following field types: All except auto number , formula , and add notes . Refer to this page to learn about describing fields. Open the form builder. Select the required ...
                                                                                          • Manage Sections in Application

                                                                                            Refer to this page to learn about sections. You can customize certain aspects of sections at the device level, including browser, phone, and tablet modes. Zoho Creator supports over 2000+ built-in icons that you can use for various components in your ...
                                                                                          Wherever you are is as good as
                                                                                          your workplace

                                                                                            Resources

                                                                                            Videos

                                                                                            Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                                                                            eBooks

                                                                                            Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                                                                            Webinars

                                                                                            Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                                                                            CRM Tips

                                                                                            Make the most of Zoho CRM with these useful tips.



                                                                                              Zoho Show Resources