Set Theme for your Application | Zoho Creator Help

Configuring Theme for Your Application

Notes
Note: This feature is currently in beta phase and is available through our Early Access program. 
To use it, please go to Operations -> Early Access Features and enable the feature for your account.
Notes

We’ve introduced new themes, and the older themes will be deprecated gradually. To ensure a smooth transition and take advantage of the latest designs and features, please refer to our Theme Migration to learn how to migrate your application themes to the new format. Before diving in, it’s important to understand application themes.
Creator provides multiple theme layouts that can be applied to your application across web, phone, and tablet modes. You can customize colors, fonts, and logos to create a design that aligns with your brand identity. A live preview is available as you select different options, allowing you to visualise how your application will look before applying changes.

Available customization options

  1. Layout: Choose from predefined theme layouts designed for each device type.
  2. Logo Preference: Display the organization logo or app icon.
  3. Color Options: Pick from preset colors or create custom colour for various interface components.
  4. Font: Choose from 12 available fonts to apply across your application.

Setting up a theme (Web, Phone, or Tablet)

  1. Navigate to the edit mode of your application and select the appropriate device icon from Web, Phone, or Tablet () in the top-left corner.
  2. Click the Themes icon in the top-right corner to open the Themes tab.
  3. Configure the following options as needed:
    1. Layout
      1. Choose a preferred layout under themes.
    2. Logo Preference (web only)
      1. Click Logo Preference in the Themes tab.
      2. Select one of the following:
              -> Organization Logo (available only if the logo is uploaded in the Organization module)
              -> App Icon
      3. Changes are saved automatically and are visible in live mode.
    3. Color Options
      1. Under colors, choose from preset colors, your saved custom colors, or create new ones.
      2. Customize:
              -> Theme/Brand Colour (applied to buttons, links, and dropdowns)
              -> Supporting colors for headers, menus, and submenus.
      3. To edit a custom color, hover over it and click Edit.
      4. To delete a color:
      Hover over the color and click the cross icon.
      If the color is in use, a pop-up will list all the places where it is referenced. Remove those references in the respective components before deleting the color.
    4. Font
      Under Fonts, select an option from the drop-down list that resonates with the overall theme of your application. 
All configured theme settings, including fonts, colors, and logos, are automatically applied throughout the application.

Points to note

  1. Logo placement options are available only for Mobile and Tab in certain layouts.
  2. Custom colors can be reused across applications, layouts, and devices.
  3. Dark shade support is available only for phone and tablet themes.
  4. A live preview is provided for all selected options before applying the theme.
  5. Up to 30 custom colors can be added per Creator account.
  1. Understand Application Themes