> ## 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の画面全体で色と角丸を統一する

> ファイルごとにテーマを選択または生成し、個別の画面のスタイルを変更して、組織のテーマを編集できます。色と角丸をテーマのトークンにリンクすると、変更がすべての画面に反映されます。

テーマは、画面で使う共有のカラーパレットと角丸のセットです。すべてのファイルにはテーマと外観（ライトまたはダーク）があり、画面はテーマのトークンでスタイルが設定されます。テーマを編集すると、それを使用するすべての画面に反映されます。そのため、チームはプロンプトのたびに色を指定し直す代わりに、1つの共通の設定から作業できます。

作成または生成したテーマは組織に保存され、ホームの**Themes**に一覧表示されます。そのため、組織内のどのファイルでもそれらを使用できます。

## ファイルのテーマを選ぶ

ファイル内のプロンプトコンポーザーから、新しい画面に使うテーマと外観を選択します。ホームのプロンプトボックスには、テーマボタンは表示されません。

<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がプロンプトに基づいて画面ごとに判断します。たとえば「a dark dashboard」と書くと、ダークの画面になります。
  </Step>
</Steps>

<Note>
  選択した内容は、次に生成する画面に適用されます。キャンバスにすでにある画面の見た目は変わりません。
</Note>

## Flowstepにテーマをデザインさせる

ファイルにまだテーマがない場合（新しいファイルでテーマが**Automatic**のままの場合）、Flowstepは最初に生成する画面と並行してカスタムテーマをデザインします。作業中、チャットに**Designing theme**のステップが表示されます。

Flowstepは次の情報からテーマを作成します。

* プロンプトで指定した色
* [デザインガイドライン](/ja/design-guidelines)内の色
* 添付ファイルや[貼り付けたリンク](/ja/design-references#paste-a-url)からのブランドカラー
* ほかに手がかりがない場合は、プロンプトに書かれたプロダクトやムード

テーマには、短い名前、ライトとダークの両方の完全なパレット、角丸の段階が含まれます。テーマは組織のホームにある**Themes**に保存され、その後に生成されるすべての画面でそのファイルが使用します。

ファイルにテーマが設定されると、Flowstepは自動的に別のテーマをデザインしません。新しいテーマが必要な場合は、テーマメニューで**Automatic**をもう一度選んでください。次の生成で新しいテーマがデザインされ、ファイルはそのテーマに切り替わります。Flowstepがテーマをデザインできない場合は、組み込みのテーマにフォールバックします。

<Tip>
  最初のプロンプトでブランドカラーに言及するか、生成前に[デザインガイドライン](/ja/design-guidelines)でブランドカラーを設定すると、生成されたテーマはそれらの色から始まります。
</Tip>

## 1つの画面のテーマを変更する

ファイルの他の部分に影響を与えずに、1つの画面のスタイルだけを変更するには、次の手順に従います。

1. キャンバスで画面を選択します。
2. 画面の上にあるメニューで、**Theme**ボタンをクリックします。
3. 組織のテーマまたは組み込みのテーマを選ぶか、**Light**と**Dark**を切り替えます。

テーマを切り替えると、画面はすぐに再描画されます。**Light**と**Dark**を切り替えると、[AI編集](/ja/editing-designs)と同様に、Flowstepが画面のスタイルを再設定します。生成の実行中は、このメニューは使用できません。

## テーマを編集する

ホームの**Themes**セクションからテーマを開きます。テーマエディターには、テーマのライブプレビューと、右側に**Theme settings**が表示されます。上部の**Light**と**Dark**ボタンでプレビューを切り替え、テーマ名をクリックすると名前を変更できます。

* **Colors** — 各カラーグループには、ライト用とダーク用の色見本があります。グループは**Primary**、**Secondary**、**Accent**、**Muted**、**Destructive**、**Background**、**Card**、**Popover**、**Border**、**Input**、**Ring**、**Charts**、**Sidebar**です。色見本をクリックすると、カラーピッカーまたは16進数の値で、グループの塗りつぶしの色やテキストの色などを編集できます。
* **Radius** — 角丸の段階（**Square**、**Slight**、**Balanced**、**Soft**、**Round**）から選ぶか、**Custom**を選んで**Base radius**をドラッグし、独自の値を設定します。

編集内容は下書きとして保存されるため、作業中に画面は変わりません。準備ができたら、次のいずれかを行います。

* **Publish**をクリックして、そのテーマを使用するすべての画面を更新します。Flowstepは「Published. Screens using this theme are updating.」（公開しました。このテーマを使用する画面を更新しています。）と表示して確認します。
* **Reset changes**をクリックして、公開していない変更を破棄します。そのテーマを使用する画面には影響しません。

テーマを削除するには、**Theme settings**の下部にある**Delete theme**をクリックするか、ホームの**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.