Change colors

Each element in your app consists of several components that can be defined in color. For input cells, this is, for example, the background color of the element itself, the color of the value displayed in the element, or the color of the - / + buttons.

In this article, you'll learn how to edit the color of each item in your app.

In this article:

• Working with the color picker
• Change colors in input and output elements
• Change colors in a list

Working with the color picker

The color of an element can be defined in several ways. The easiest method is to select the color with the mouse on the color picker.

1. Open the editor for the item you want to edit.
2. Navigate to the "Style" tab.
3. Open the color picker by clicking on the small arrow next to the corresponding component of the element.
4. Edit the color on the color picker.
5. Close the color picker by clicking the small arrow again.
6. Save and update your app.

How to use the color picker

Use the slider to the right of the color box to select the color range.
Then, in the color box, click the desired hue to define the color.

The opacity of the color can be selected from the control under the color field (from fully opaque to transparent).

If you want to select a specific color that corresponds to your logo, for example, you can enter the RGB coordinates or the HEX code into the corresponding fields. This method is recommended for experienced users who want to use a specific hue and know the respective values.

Change colors in input and output elements

You can adjust the color for the following components of an input or output element in the editor (tab "Style"):

Background color:

The background color of the entire input or output element.

Value Color:

The value in an input or output field.

Title text color:

The color of the title (left) or the secondary label (right) above the value.

Color of the - / + buttons:

The color of the - / + buttons (if available).

Change colors in a list

For lists, you can define the following colors in the editor (tab "Style"):

List design:

There are two themes available for the "classic" list. A "light" or a "dark" theme, which you can select from the corresponding drop-down menu.

Dashboard color palette:

Here you can select a predefined color palette for the dynamic dashboard. By clicking on the plus symbol, you can add more colors to the color theme.
You can edit individual colors by opening the color picker with the small arrow and selecting the desired color there.

Category color palette:

If you have defined your list as a "card list", you can categorize your cards by color. In the "Style" tab, select the corresponding color scheme under "Category color palette".
You can add additional colors to the color scheme (by clicking on the plus symbol) or edit the individual colors by opening the color picker using the small arrow next to the color.

To define the category column, navigate to the "Main" tab.

In the "Category column" (in the lower area), select the column to categorize your list. This can be, for example, the "City" column. In this case, all entries containing the same city will be marked in the same color.