🖌️ Branding

Branding edits your app’s theme directly. The colors and fonts listed here are the ones Ada generated for your app, and editing one updates every screen that uses it. Changes reach the preview without a rebuild.

The panel has three sections: Colors, Fonts and Toast. Colors is open by default.

If the app has no theme yet, the panel says so and asks you to generate or edit the app first.

Colors

Every color in your app’s theme appears as its own row, with a swatch and the color name. The name is shown in words, so a theme color stored as primaryDark reads as “Primary Dark”.

Each row has three controls:

• The swatch opens the color picker, the same one the classic Adalo editor uses.
• ✎ Rename turns the row into a text field. Enter saves, Escape cancels.
• 🗑 Delete removes the color.

Deleting a color that is in use

If the color is used anywhere in the app, deleting does not happen straight away. A confirmation appears saying how many places use it, and offering Delete anyway.

Choosing Delete anyway does not leave those places broken. Each one is rewritten with the color’s actual value, and only then is the named color removed. The app looks identical afterwards; it simply no longer has a name for that color.

Adding a color

The last row of the section is the add row: a swatch to pick the color, a name field, and Add. Pressing Enter in the name field adds it too.

Give it a name that describes its job rather than its appearance. Ada reads these names when it builds, so danger is more useful to it than red.

Fonts

Two fonts drive the whole app:

• Headings — titles, subtitles and other primary text. Usually the bolder, more expressive of the two.
• Body — the majority of the text in the app. Usually the simpler, easier to read one.

Eleven families are available, each previewed in its own typeface in the dropdown:

Standard System Font, Inter, Poppins, Montserrat, Roboto, Work Sans, DM Sans, Nunito, Lora, Playfair Display, and Space Grotesk.

Note

The list is deliberately short. These are the families the app itself can load, so a font outside the list would show correctly in the builder and fall back to something else on a real phone.

The section does not appear if the app’s theme has no font tokens.

Toast

A toast is the small message that appears over your app after something happens — “Saved”, “Could not connect”, and so on. This section controls how every toast in the app looks and behaves.

Toast colors

Four colors, one per kind of message:

• Success
• Error
• Warning
• Info

These are ordinary theme colors, so they are edited with the same picker as any other. They appear here as well as in Colors because this is where you can see their effect.

Position and duration

• Position — a Top / Bottom toggle for where toasts appear on screen.
• Duration (ms) — how long a toast stays before it disappears, in milliseconds. The minimum is 1000, and the field steps in 500s.

Test toast

The Test toast button fires a sample toast in the live preview using your current settings. Use it after changing a color, the position or the duration, rather than hunting for an action in the app that happens to produce one.

Saving

Nothing in this panel saves as you type. Once you have changed anything, a button appears at the bottom of the panel reading Save 1 change or Save N changes.

Renaming and deleting a color are the exceptions — both apply immediately, because both rewrite the places that use the color.