Skip to main content
A theme is a shared color palette and corner rounding for your screens. Every file has a theme and an appearance (light or dark), and screens are styled with the theme’s tokens. Edit a theme and every screen that uses it follows, so your team works from one set of decisions instead of restating colors in every prompt. Themes you create or generate are saved to your organization and listed under Themes on Home, so any file in the organization can use them.

​
Choose a theme for a file

Pick the theme and appearance for new screens from the prompt composer inside a file. The theme button isn’t available in the prompt box on Home.
1

Open the theme menu

In the prompt composer, click the theme button — it shows the current theme’s swatch, or a color wheel when the theme is Automatic. The menu is titled Theme for new screens.
2

Pick a theme

Choose Automatic, one of your organization’s themes (listed first), or a built-in theme: Default, Blue, Grayscale, Green, Ice, Orange, Red, Rose, Violet, or Yellow.
3

Pick an appearance

Under Appearance, choose Light or Dark, or Automatic to let Flowstep decide per screen from your prompt — “a dark dashboard” comes out dark.
Your pick applies to the screens you generate next. Screens already on the canvas keep their look.

​
Let Flowstep design a theme

When a file has no theme yet — a new file with the theme left on Automatic — Flowstep designs a custom theme alongside the first screens it generates. You’ll see a Designing theme step in the chat while it works. Flowstep builds the theme from:
  • Colors you name in your prompt
  • Colors in your design guidelines
  • Brand colors from attachments and links you paste
  • The product and mood your prompt describes, when there’s nothing more specific to go on
The theme gets a short name, a full palette for both light and dark, and a rounding step. It’s saved to your organization under Themes on Home, and the file uses it for every screen generated after that. Once a file has a theme, Flowstep doesn’t design another one on its own. To get a fresh theme, pick Automatic again in the theme menu — the next generation designs a new one and the file settles on it. If Flowstep can’t design a theme, the file falls back to a built-in one.
Mention your brand colors in your first prompt, or set them in your design guidelines before you generate, and the generated theme starts from them.

​
Change one screen’s theme

To restyle a single screen without touching the rest of the file:
  1. Select the screen on the canvas.
  2. In the menu above the screen, click the Theme button.
  3. Pick one of your organization’s themes or a built-in theme, or switch between Light and Dark.
Switching the theme repaints the screen instantly. Switching between Light and Dark asks the AI to restyle the screen, the same as an AI edit. The menu is unavailable while a generation is running.

​
Edit a theme

Open a theme from the Themes section on Home. The theme editor shows a live preview of the theme, with Theme settings on the right. Use the Light and Dark buttons at the top to switch the preview, and click the theme’s name to rename it.
  • Colors — each color group has a swatch for light and one for dark: Primary, Secondary, Accent, Muted, Destructive, Background, Card, Popover, Border, Input, Ring, Charts, and Sidebar. Click a swatch to edit its colors — for example, a group’s fill and text colors — with the color picker or a hex value.
  • Radius — pick a rounding step (Square, Slight, Balanced, Soft, or Round), or choose Custom and drag Base radius to set your own.
Your edits save as a draft, so screens don’t change while you work. When you’re ready:
  • Click Publish to update every screen that uses the theme. Flowstep confirms with “Published. Screens using this theme are updating.”
  • Click Reset changes to discard your unpublished changes. Screens using the theme aren’t affected.
To remove a theme, click Delete theme at the bottom of Theme settings, or the trash icon next to it in the Themes list on Home. A deleted theme is no longer offered in theme menus, but screens already using it keep their look, so nothing on your canvas changes.
Everyone in your organization except Guests can edit and delete themes.
Colors and corners can point at a theme token instead of a fixed value. A linked value follows the screen’s theme, so when the theme changes — a different theme, a published edit, or a switch between light and dark — linked colors and corners update with it. Colors — in the Fill or Border panel, click the color swatch. On the Token tab, search or pick a token from the Theme, Base, or Tailwind groups. Use the Custom tab for an exact color. A linked color shows its token name in the panel, and you can still adjust its opacity. Corners — in the Corners panel, click a corner preview. On the Token tab, pick a step (for example, md or lg); on the Custom tab, type an exact value in pixels. A linked corner shows its token name, and changing the theme’s rounding re-rounds it. To turn a linked value back into a fixed one, click Detach from token. The color or corner keeps its current look but no longer follows the theme.

​
Good to know

  • Screens keep their own theme — each screen remembers its theme and appearance. Changing the file’s theme only affects screens you generate next; use the per-screen Theme menu to restyle existing ones.
  • Published versions only — screens show a theme’s published version. Drafts are visible only in the theme editor until you publish.
  • Token links survive edits — theme colors used inside shadows, filters, and gradients stay linked to the theme when Flowstep edits or regenerates a screen.
  • Rounding steps that don’t scale — the none and full corner tokens are always square and fully round, whatever the theme’s rounding.