Change your app's theme in the Design panel

What you will accomplish

Apply a ready-made theme
Set your own colours and fonts
Adjust corners and shadows

Before you start

An app in App Builder

Step 1: Open the Design panel
In the editor, click Design in the header, then choose Themes ("Browse and apply themes to your project").
Screenshot: Design panel with Themes and Visual edits
Step 2: Start from a preset
Under Choose a theme to customize, pick a preset: Daylight, Cream, Midnight, Forest, Ocean, Sunset, Rose or Minimal.
Step 3: Adjust colours
Fine-tune Primary, Secondary, Accent, Background, Foreground and Muted.
Step 4: Choose fonts and sizes
Pick a Heading font and a Body font (for example Inter, Poppins, Playfair Display or DM Sans) and set the Base font size (12–20 px).
Step 5: Set the shape
Use Border radius (0–24 px) for square or rounded corners and Shadow intensity for flat or raised elements.
Step 6: Apply
Click Apply theme. The theme is saved into your app's styles and the preview updates. Click Cancel to close without changes.

Tips

To change one element by pointing at it, use Visual edits and Start selecting in the same panel once the live preview is connected.

Next step

Build your first application · Lesson 4 of 5