Change how your app looks

There are two ways to change how your app looks, and they work at different levels. The theme sets the colours, corners, and font for the whole app in one place. The element controls change one element on one screen — a single button, heading, or card. Most apps need a little of both.

The theme: the whole app at once

Open the Editor mode on the left. In its header there is a palette control; selecting it opens App theme. The dialog shows a small live preview of your app's surfaces as you change them.

The controls are:

Presets — ready-made colour schemes. Select one to restyle the app in a single step; the small preview above shows the result, and you can adjust it further before saving.
Colors — the Brand color (light) and Brand color (dark) pickers. Both are needed because people may view your app in light or dark mode.
Corner rounding — a slider that sets how rounded buttons, cards, and input fields are.
Font — the typeface used across the app.

Select Apply & rebuild to keep the changes. The app view then rebuilds so you can see the result. Cancel closes the dialog and leaves the app as it was.

Once you have a look you like, you can save it as a named preset with Save preset. It then sits alongside the built-in presets and can be applied to this app or another one later.

One element at a time

For a change to a single element, select Edit mode under the preview and click the element. The Element mode on the left then shows its controls, grouped so you can find things quickly:

Content — the element's own text, and for images and links their address and label.
Typography — size, weight, line height, letter spacing, alignment, and colour.
Layout — width, height, spacing between items, and the space around the element.
Background — the fill colour behind the element, or an image.
Border & Shadow — outline, corner radius, and depth.
Motion Effects, Transform, and Mask — hover behaviour, rotation and scale, and shaped edges.
Responsive — hide an element on mobile, tablet, or desktop.
Attributes — the element's technical settings, one row per setting. The rows stay as you left them: give a row a name and a value and the setting is applied to the preview. Empty a row's value, or select its trash icon, to remove the setting. Use this for anything the groups above do not cover, and Custom CSS for the element's own style rules.

Element changes are applied to the preview straight away, so you can try a value and undo it if you do not like it. Ctrl+Z (or Cmd+Z on a Mac) undoes the last change you made this way. One setting, Responsive, takes effect after the next rebuild.

Which file you are editing

Every element comes from one file, and you do not have to know which: click an element and the editor opens the file it lives in. The file button in the preview toolbar — shown in Edit mode, next to the Edit mode control — names that file and lists what the screen is built from: the layouts and the page, then Files on this screen, the files that render a part of what you can see.

Everything outside the file you are in is faded while you work, so you can see how far that file reaches. On a page whose sections come from components, the page stays as it looks — the sections are part of what the page renders — while the frame around it, such as the header, is faded; clicking a section moves you into the component that draws it. Faded elements stay clickable for exactly that reason.

Choosing a layout is different: the pages that use it are hidden and a Content block marks where a page is inserted, so you can change the frame around every page at once. Clicking the frame does not take you there; open the file button and choose the layout when you want to change it everywhere.

Ready-made blocks

The Editor mode also holds a palette of ready-made blocks, listed under Widgets. Click a block to add it to the page, or drag it into the preview and drop it where it belongs. A block appears in the app straight away, and you keep it by selecting Submit in the bar at the bottom of the left column — see Change your app for that bar.

One of the blocks is Container. Adding one asks Which layout would you like to use?: choose Flexbox and then a Direction of Column or Row, or choose Grid and set how many Columns it should have, then select Insert. A container is the box you put other blocks inside.

Button is for something that acts inside the app, such as submitting a form. For a button that opens a page or web address, use Link button instead and put the address in its Link to field.

Keep a section you like

If you have arranged a section you want to use again, select it in the preview and choose Save as Template in the menu beside it. Give the template a Template name and select Save.

It then appears under My templates in the Editor mode. Select one to add it to the page, or drag it to put it exactly where you drop it.

Which one should you use?

Use the theme when the change should apply everywhere — the colours of the app, how rounded it feels, or its typeface. Use the element controls when the change belongs to one thing on one screen, such as a heading that should be larger or a card that needs a border.

For anything that spans several screens without being a theme change — "make the spacing more generous across the app", "use rounder buttons everywhere, but keep the header square" — describe it in the Agent chat instead. The agent applies it consistently and you can check the result in Preview. To move between working and published versions, see Preview and publish.