> ## 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.

# 使用主题，让 Flowstep 屏幕的颜色和圆角保持一致

> 为每个文件选择或生成主题，单独重新设计屏幕样式，编辑组织的主题，并将颜色和圆角关联到主题令牌，使更改自动应用到所有屏幕。

主题是屏幕的共享颜色调色板和圆角设置。每个文件都有一个主题和外观（浅色或深色），屏幕会使用主题的令牌进行样式设置。编辑主题后，所有使用该主题的屏幕都会随之更新，因此您的团队可以基于同一套设计决策工作，而不必在每条提示词中重复描述颜色。

您创建或生成的主题会保存到您的组织中，并列在 Home 页面的 **Themes** 下，因此组织中的任何文件都可以使用这些主题。

## 为文件选择主题

在文件内的提示词编辑器中，为新屏幕选择主题和外观。Home 页面的提示框中没有主题按钮。

<Steps>
  <Step title="打开主题菜单">
    在提示词编辑器中，点击主题按钮。它会显示当前主题的色块；当主题为 **Automatic** 时，则显示色轮。菜单标题为 **Theme for new screens**。
  </Step>

  <Step title="选择主题">
    选择 **Automatic**、您组织中的某个主题（列在最前），或内置主题：**Default**、**Blue**、**Grayscale**、**Green**、**Ice**、**Orange**、**Red**、**Rose**、**Violet** 或 **Yellow**。
  </Step>

  <Step title="选择外观">
    在 **Appearance** 下，选择 **Light** 或 **Dark**，或选择 **Automatic**，让 Flowstep 根据您的提示词为每个屏幕自行决定。例如，提示词中写的是"深色仪表板"，生成的结果就是深色的。
  </Step>
</Steps>

<Note>
  您的选择将应用于接下来生成的屏幕。画布上已有的屏幕保持原有外观。
</Note>

## 让 Flowstep 设计主题

当文件还没有主题时（例如新文件的主题保持为 **Automatic**），Flowstep 会在生成的首批屏幕中同时设计一个自定义主题。您会在聊天中看到 **Designing theme** 步骤，表示它正在工作。

Flowstep 会基于以下内容构建主题：

* 您在提示词中提到的颜色
* [设计准则](/zh/design-guidelines)中的颜色
* 附件中的品牌颜色，以及您粘贴的[链接](/zh/design-references#paste-a-url)中的品牌颜色
* 当没有更具体的信息时，提示词中描述的产品和氛围

该主题会获得一个简短的名称、适用于浅色和深色的完整调色板，以及一个圆角设置。它会保存到您组织的 Home 页面 **Themes** 下，此后该文件生成的所有屏幕都会使用它。

文件有了主题后，Flowstep 不会自行再设计另一个。如需全新主题，请在主题菜单中重新选择 **Automatic**。下一次生成会设计新主题，文件随之采用新主题。如果 Flowstep 无法设计主题，文件会回退到内置主题。

<Tip>
  在第一条提示词中提及您的品牌颜色，或在生成前在[设计准则](/zh/design-guidelines)中进行设置，生成的主题就会以此为起点。
</Tip>

## 更改单个屏幕的主题

如需单独重新设计某个屏幕，而不影响文件中的其他部分：

1. 在画布上选中该屏幕。
2. 在屏幕上方的菜单中，点击 **Theme** 按钮。
3. 选择您组织的某个主题或内置主题，或在 **Light** 和 **Dark** 之间切换。

切换主题会立即重绘该屏幕。在 **Light** 和 **Dark** 之间切换时，会要求 AI 重新设计该屏幕，方式与 [AI 编辑](/zh/editing-designs)相同。生成正在进行时，此菜单不可用。

## 编辑主题

在 Home 页面的 **Themes** 部分打开主题。主题编辑器会显示主题的实时预览，右侧为 **Theme settings**。使用顶部的 **Light** 和 **Dark** 按钮切换预览，点击主题名称即可重命名。

* **Colors**（颜色）：每个颜色组都有一个浅色色块和一个深色色块，包括 **Primary**、**Secondary**、**Accent**、**Muted**、**Destructive**、**Background**、**Card**、**Popover**、**Border**、**Input**、**Ring**、**Charts** 和 **Sidebar**。点击色块即可编辑其颜色（例如某个颜色组的填充色和文字色），可使用取色器或十六进制值。
* **Radius**（圆角）：选择一个圆角级别（**Square**、**Slight**、**Balanced**、**Soft** 或 **Round**），或选择 **Custom** 并拖动 **Base radius** 来设置自定义值。

您的编辑会先保存为草稿，因此您在编辑时屏幕不会发生变化。准备就绪后：

* 点击 **Publish** 以更新所有使用该主题的屏幕。Flowstep 会确认："Published. Screens using this theme are updating."（已发布，使用此主题的屏幕正在更新。）
* 点击 **Reset changes** 以放弃未发布的更改。使用该主题的屏幕不受影响。

如需删除主题，请点击 **Theme settings** 底部的 **Delete theme**，或点击 Home 页面 **Themes** 列表中主题旁边的垃圾桶图标。被删除的主题不再出现在主题菜单中，但正在使用它的屏幕会保留其外观，因此画布上的内容不会发生变化。

<Note>
  组织中除 Guest（访客）以外的所有人都可以编辑和删除主题。
</Note>

## 将颜色和圆角关联到主题

颜色和圆角可以指向主题令牌，而不是固定值。关联的值会跟随屏幕的主题变化。当主题发生变化（切换为其他主题、发布编辑，或在浅色与深色之间切换）时，关联的颜色和圆角也会随之更新。

**Colors**：在 **Fill** 或 **Border** 面板中，点击颜色色块。在 **Token** 标签页中，搜索或从 **Theme**、**Base** 或 **Tailwind** 组中选择令牌。如需精确颜色，请使用 **Custom** 标签页。关联的颜色会在面板中显示其令牌名称，您仍可以调整其不透明度。

**Corners**：在 **Corners** 面板中，点击圆角预览。在 **Token** 标签页中选择一个级别（例如 `md` 或 `lg`）；在 **Custom** 标签页中以像素为单位输入精确值。关联的圆角会显示其令牌名称，更改主题的圆角设置会重新调整它。

如需将关联值恢复为固定值，请点击 **Detach from token**。颜色或圆角会保持当前外观，但不再跟随主题。

## 注意事项

* **屏幕保留各自的主题**：每个屏幕都会记住其主题和外观。更改文件的主题只影响您接下来生成的屏幕。如需重新设计现有屏幕，请使用每个屏幕的 **Theme** 菜单。
* **仅显示已发布版本**：屏幕显示主题的已发布版本。草稿仅在主题编辑器中可见，直到您发布为止。
* **令牌链接在编辑后保持有效**：阴影、滤镜和渐变中使用的主题颜色，在 Flowstep 编辑或重新生成屏幕时仍会与主题保持关联。
* **不随主题缩放的圆角级别**：`none` 和 `full` 圆角令牌始终分别为方形和完全圆形，与主题的圆角设置无关。


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