Overview
The Color palette feature in the App Designer allows you to create, select, edit, duplicate, and delete Color palettes for your apps.
Accessible under the Tools menu in the App Designer editor, this feature introduces new default palettes: Light, Nature, Lavender, Autumn, and Midnight, and lets you manage custom palettes to enhance the visual appeal and consistency of your apps.
Managing Color palettes
Color palettes are divided into two categories: Default and Custom (created by you) palettes. Within Custom palettes, newly created ones are labeled with a New tag, while older Themes (if present) are marked with a Legacy tag.
If there are no Themes, all palettes are considered new, and no tags will appear—only the palette names are shown, as the tags are unnecessary.
Creating a new palette
You can create a new Color palette in two ways. The first is from the App Designer Home page by clicking the three-dot menu on the right panel and selecting the Add color palette option.
The second, more common method, is by clicking the New palette button within the Color palette option of the App Designer editor Tools.
Both methods open a window where you can define the new palette for your apps. You have to enter a name for the palette and choose the colors that compose it by clicking the + symbol in each of the color boxes.
|
Duplicate palette names are not allowed. You can modify existing palettes if needed. |
A Color palette consists of the following colors:
•Primary color: Used for app titles, form labels, Collection titles, and all primary and secondary buttons, as well as form links and Ask Ada's charts/graphs.
•Secondary color: Applied to loaders, tabs, switches, radio buttons, and checkboxes in focus mode within apps and forms.
•Tertiary color: Applied to the Side menu and its associated elements.
•Fourth color: Used for all text except titles. This color is preset and cannot be changed (indicated by the lock icon). It is derived from the Primary color to ensure proper contrast and accessibility in your app.
After naming the palette and assigning its colors, click Accept to create and save it.
A pop-up message will confirm the successful creation of the palette.
The new palette now appears under the Custom section of the Color palette menu in the App Designer editor Tools.
Editing existing palettes
To edit an existing palette, click the three dots next to the desired palette and select Edit.
|
This option is only available for Custom Color palettes. Default Color palettes cannot be edited. |
Make any necessary changes, then click Accept to save your updates.
Duplicating palettes
To duplicate a palette, whether Default or Custom, click the three dots next to the palette and select Duplicate.
The Duplicate Color Palette window appears, allowing you to name the duplicate and define its colors. By default, the duplicate has the same name as the original palette with a "copy [number of the duplication]" suffix added.
Once you are done, click Accept to create the duplicate.
Deleting palettes
To delete a palette, click the three dots next to the palette and select Delete.
|
This option is only available for Custom Color palettes. Default Color palettes cannot be deleted. |
A confirmation message appears. Click Delete if you are sure you want to remove the palette.
Once deleted, the palette is no longer visible in the Color palette option of the App Designer editor Tools.
Applying a Color palette
To select and apply a Color palette, click the radio button before the palette name. Note that a visual representation of the palette’s colors is displayed next to the palette's name.
After selection, your app’s background adjusts based on the tertiary color of the chosen palette, applying an opacity effect.
|
Be cautious when using light tertiary colors as this could blend the background and sidebar, making them hard to distinguish.
For more information on how color palettes are applied refer to the Knowledge Base documentation. |
Switching between Color palettes
Switching between Color palettes, whether Default or Custom, will apply the palette and reset the colors of customized Controls without showing an alert.
Button Control and Side menu customization overrides
•Button Control: When you select a specific Background color for a Button Control, a set of colors is automatically generated and applied to various button states, including hover, active, and text colors.
•Side menu: Choosing a specific Background color for the Side menu will generate colors that apply to elements like the Side menu background, Page names, and active states.
•Side menu font color: Selecting a specific Page font color overrides the Color palette settings and is consistently applied across all Side menu text states.
Further considerations
•New apps: When creating a new app and configuring the app style, the default background type is set to Color with the Light palette, and the container style is set to Blurred.
•Background modifications: Changes to the selected Color palette will not immediately affect the app’s background. The background will only update if modified through the App configuration or when a new palette is selected.
Last Updated 12/2/2024 10:55:52 AM