How to Customize the Application's Theme

Required Permissions

This section requires the Application Designer permission from your Domain's administrator.

Check What are the Design Tasks? to learn more about permissions to work with Design Mode and other tools.

Learn how to customize the App Theme. The App Theme includes the colors of the top bar, logo, toolbar, and editable cells' highlighting.

Designers can customize the following elements in an application's interface:

  1. The top bar's color.
  2. The toolbar's color.
  3. Adding an optional logo to the top bar's left corner, next to the user's name.
  4. The color gradient highlighting the editable cells on the table.

Note

If the Designer has configured a specific color for a column's cells (in Design Mode > Layout > Cell Colors bg), the Cell Colors bg choice overrides the application's choice for the color gradient highlighting the editable cells (4).

See Change Table Headers or Cells Colors and Format for more information about customizing the column cells' colors.

Follow the steps below to customize the App Theme.

  1. In the Home, click the icon on the application in either Tile or Grid view.

  2. Click on the Settings option from the drop-down list menu. The action leads to the Application Settings.

  3. In the Application Settings, click on the App Theme tab in the left sidebar. The action leads to the panel where you can customize the application's colors.

  4. In the App Theme panel, you can customize the application's theme.

    Turn off the Use Default Layout switch to override the eLegere default configuration for the desired setting.

    Tip

    If you turn On again the Use Default Layout toggle switch, you will use the default configuration while keeping the settings already customized saved.

    Click on the Reset Default button () to reset a setting you have customized to the default configuration.

    • Topbar (1 and 3)

      • Click on Color to choose a color through the picker or type the color's Hex Code

      • Click on the square to upload a *.jpeg or *.svg or *.png file as logo. The logo will appear in the left corner of the top bar.

    • Toolbar (2)

      • Click on Color to choose a color through the picker or type the color's Hex Code

    • Editable Fields Gradient Background (4)

      • Click on Color 1 or Color 2 to choose the gradient's colors through the picker or type the colors' Hex Codes.

  5. Once done, click on Save, Save and Open, Save and Exit or Save and Design to save the changes. (If you have changed your mind and you don't want to save the changes, click on the Exit button instead.)

The application will launch with the new colors' customizations and the chosen logo.

Success

You have customized the colors of the top bar, toolbar, and the editable cells' highlighting and added a logo.