> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Use themes to keep colors and corner rounding consistent across Flowstep screens

> Pick or generate a theme for each file, restyle single screens, edit your organization's themes, and link colors and corners to theme tokens so changes flow through every screen.

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.

<Steps>
  <Step title="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**.
  </Step>

  <Step title="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**.
  </Step>

  <Step title="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.
  </Step>
</Steps>

<Note>
  Your pick applies to the screens you generate next. Screens already on the canvas keep their look.
</Note>

## 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](/design-guidelines)
* Brand colors from attachments and [links you paste](/design-references#paste-a-url)
* 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.

<Tip>
  Mention your brand colors in your first prompt, or set them in your [design guidelines](/design-guidelines) before you generate, and the generated theme starts from them.
</Tip>

## 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](/editing-designs). 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.

<Note>
  Everyone in your organization except Guests can edit and delete themes.
</Note>

## Link colors and corners to your theme

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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.