テーマを使って、Flowstepの画面全体で色と角丸を統一する

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

​

ファイルのテーマを選ぶ

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

​

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

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

• プロンプトで指定した色
• デザインガイドライン内の色
• 添付ファイルや貼り付けたリンクからのブランドカラー
• ほかに手がかりがない場合は、プロンプトに書かれたプロダクトやムード

テーマには、短い名前、ライトとダークの両方の完全なパレット、角丸の段階が含まれます。テーマは組織のホームにあるThemesに保存され、その後に生成されるすべての画面でそのファイルが使用します。 ファイルにテーマが設定されると、Flowstepは自動的に別のテーマをデザインしません。新しいテーマが必要な場合は、テーマメニューでAutomaticをもう一度選んでください。次の生成で新しいテーマがデザインされ、ファイルはそのテーマに切り替わります。Flowstepがテーマをデザインできない場合は、組み込みのテーマにフォールバックします。

​

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

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

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

テーマを切り替えると、画面はすぐに再描画されます。LightとDarkを切り替えると、AI編集と同様に、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一覧にあるゴミ箱アイコンをクリックします。削除されたテーマはテーマメニューに表示されなくなりますが、すでにそのテーマを使用している画面は見た目を保ちます。そのため、キャンバス上の内容は変わりません。

​

色と角丸をテーマにリンクする

色と角丸は、固定の値ではなく、テーマのトークンを参照できます。リンクされた値は画面のテーマに従うため、テーマが変わると（別のテーマに変更、公開された編集、ライトとダークの切り替えなど）、リンクされた色と角丸も一緒に更新されます。 Colors — FillまたはBorderパネルで、色の見本をクリックします。Tokenタブで、Theme、Base、またはTailwindグループからトークンを検索または選択します。正確な色が必要な場合は、Customタブを使用します。リンクされた色には、パネルにトークン名が表示されます。その後も不透明度は調整できます。 Corners — Cornersパネルで、角丸のプレビューをクリックします。Tokenタブで段階（例：mdやlg）を選びます。Customタブでは、ピクセル単位で正確な値を入力します。リンクされた角丸にはトークン名が表示され、テーマの角丸を変更すると、その値も再計算されます。 リンクされた値を固定値に戻すには、Detach from tokenをクリックします。色または角丸は現在の見た目を保ちますが、テーマには従わなくなります。

​

知っておくと便利なこと

• 画面は独自のテーマを保持します — 各画面は、そのテーマと外観を記憶しています。ファイルのテーマを変更しても、影響するのは次に生成する画面だけです。既存の画面のスタイルを変えるには、画面ごとのThemeメニューを使用してください。
• 公開済みのバージョンだけが表示されます — 画面にはテーマの公開済みバージョンが表示されます。下書きは、公開するまでテーマエディターでのみ確認できます。
• トークンのリンクは編集後も維持されます — シャドウ、フィルター、グラデーションの中で使われているテーマの色は、Flowstepが画面を編集または再生成するときも、テーマにリンクされたままです。
• テーマの角丸設定によらない段階 — noneとfullの角丸トークンは、テーマの角丸の設定に関係なく、常に四角と完全な円形です。