Colors
Every color in your app’s theme appears as its own row, with a swatch and color name. Theme color names are displayed as words. For example, a color stored as primaryDark is displayed as “Primary Dark”.
The available theme colors can control different parts of your app’s interface.
Color controls
Section titled “Color controls”Each color row has three controls:
- The swatch opens the color picker, the same one used in the classic Adalo editor.
- ✎ Rename lets you rename the color. Enter saves the new name, and Escape cancels.
- 🗑 Delete removes the color.
BG — Background
Section titled “BG — Background”BG controls the main background color of your app.
Surface
Section titled “Surface”Surface controls the background color of components within your app.
For example, if your screen has a text box, card, or another component placed on top of the main background, the Surface color determines the color behind that component.
Surface Alt
Section titled “Surface Alt”Surface Alt is used for temporary or secondary surfaces, such as loading states between screens.
For example, when moving from a recipe list to a recipe details screen, a short loading state may appear during the transition. The Surface Alt color can be used for this state.
Primary Color
Section titled “Primary Color”Primary Color is the main brand color of your app.
It can be used for important actions and interactive elements such as buttons and other primary actions.
Primary Text
Section titled “Primary Text”Primary Text controls the text color used for clickable actions and interactive elements.
For example, it can control the text displayed inside a button, depending on the component.
Choose a color that provides enough contrast against your Primary Color so the text remains easy to read.
Accent 1, Accent 2, and Accent 3
Section titled “Accent 1, Accent 2, and Accent 3”The Accent colors provide additional colors for icons and other supporting elements throughout your app.
For example, they can be used for icons such as:
- Favourite
- Home
- Other navigation or action icons
Using multiple accent colors can add visual variety while keeping your app consistent with its overall branding.
Input BG — Input Background
Section titled “Input BG — Input Background”Input BG controls the background color of input fields.
For example, if your app has a form where users enter their name, email address, or other information, the Input BG determines the background of those input fields.
Deleting a color that is in use
Section titled “Deleting a color that is in use”If a color is used anywhere in your app, deleting it does not happen immediately.
A confirmation appears showing how many places use the color and gives you the option to select Delete anyway.
Selecting Delete anyway does not leave those places broken. Each place using the color is rewritten with the color’s actual value, and the named color is then removed. The app looks the same afterwards, but the color no longer has a theme name.
Adding a color
Section titled “Adding a color”The last row in the Colors section is used to add a new color.
It includes a swatch for selecting the color, a name field, and Add.
Enter a name that describes the color’s purpose rather than its appearance. For example, danger is more useful than red because Ada can use the name to understand the color’s intended purpose when building your app.
Press Enter in the name field to add the color.
Note
Changes made in this panel are not saved automatically as you type. Once you make a change, a button appears at the bottom of the panel, displaying Save 1 change or Save N changes, depending on the number of unsaved changes.\
Exceptions: Renaming and deleting a color take effect immediately. Both actions also update the places where that color is used.