> ## 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-Hant/design-guidelines)中的顏色
* 附件中的品牌色，以及你貼上的[連結](/zh-Hant/design-references#paste-a-url)中的品牌色
* 當沒有更具體的資訊時，提示詞所描述的產品與氛圍

主題會取得一個簡短的名稱、完整的淺色與深色調色盤，以及圓角設定。它會儲存到你組織的 Home 上 **Themes** 下，且該檔案之後產生的每個畫面都會使用它。

檔案一旦有了主題，Flowstep 就不會自行再設計另一個。若要取得全新的主題，請在主題選單中再次選擇 **Automatic**。下一次產生時會設計新主題，檔案也會改用它。如果 Flowstep 無法設計主題，檔案會退回使用內建主題。

<Tip>
  在第一則提示詞中提及你的品牌色，或在產生前於[設計指南](/zh-Hant/design-guidelines)中設定品牌色，生成的主題就會以它們為起點。
</Tip>

## 變更單一畫面的主題

若要重新套用單一畫面的樣式，又不影響檔案的其他部分：

1. 在畫布上選取該畫面。
2. 在畫面上方的選單中，點擊 **Theme** 按鈕。
3. 選擇你組織的某個主題或內建主題，或在 **Light** 與 **Dark** 之間切換。

切換主題會立即重繪畫面。在 **Light** 與 **Dark** 之間切換，則會要求 AI 重新設計該畫面的樣式，與 [AI 編輯](/zh-Hant/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>

## 將色彩與圓角連結到主題

色彩與圓角可以指向主題權杖，而不是固定值。連結的值會跟隨畫面的主題。因此，當主題變更時（切換到不同主題、發布編輯，或在淺色與深色之間切換），連結的色彩與圓角也會隨之更新。

**色彩**：在 **Fill** 或 **Border** 面板中，點擊色票。在 **Token** 分頁中，搜尋或從 **Theme**、**Base** 或 **Tailwind** 群組中選擇權杖。若需要精確的顏色，請使用 **Custom** 分頁。已連結的色彩會在面板中顯示其權杖名稱，而你仍可調整其不透明度。

**圓角**：在 **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.