ユーザーのデバイスがダークモードに設定されている場合、フローの色や背景をそれに合わせて切り替えることができます — より暗いグラデーションやテーマに適した画像を表示するといったことが可能です。この設定を行うには、ライトとダークのテーマごとに別バージョンを用意したスタイルを使用します。

各バージョンはフィル（単色、グラデーション、画像、動画）です。1つのフィルに複数の要素を重ねることもできます。たとえば、半透明のカラーレイヤーを画像の上に重ねてティントをかけることが可能です。2つのテーマに違いがない場合は、両バージョンを同一にしても構いません。

スタイルを要素に適用するだけで、フローがデバイスのモードに合わせて自動的に正しいバージョンを使用します。

ダークテーマの追加

デフォルトでは、新しいフローにはライトテーマが設定されています。ダークテーマを追加するには：

1. Styles パネルを開き、Colors タブを選択します。
2. アイコンをクリックして、テーマ管理メニューを開きます。
3. Add dark theme を選択します。すべてのカラースタイルにダークバリアントが追加され、2つの同一の値が設定されます。これでダークテーマを設定できます。

ダークテーマを設定する

ダークテーマを追加すると、カラースタイルリストの各エントリに Light と Dark の2つのテーマ別設定が表示されます。

スタイルを編集するには：

1. Styles パネルを開きます。
2. Colors タブを選択します。
3. スタイルエントリをクリックします。必要なスタイルがまだ存在しない場合は、新しいスタイルを作成してください。
4. Light の値と Dark の値が順に並んでいます。それぞれの値には複数のレイヤーを持たせることができます。スウォッチをクリックして、フィルタイプに応じたレイヤーを設定します：
   • ソリッドカラー
   • グラデーション
   • 画像または動画
5. Save をクリックします。

ライトとダークの値には異なるフィルタイプを使用できます。

フィルタイプの組み合わせ

スタイルの2つのバージョン間でフィルタイプを自由に組み合わせることができます。

• 単色、グラデーション、画像: どの組み合わせでも使用可能です。たとえば、背景をライトモードでは単色にし、ダークモードでは画像にすることができます。
• 動画: ライトバージョンに動画が含まれている場合、ダークバージョンにも動画が必要です（逆も同様）。2つの動画は異なるものにできます。

テーマを要素に適用する

要素のプロパティがカラースタイルを使用していない場合、ダークテーマは適用されません。画像と動画の要素はカラースタイルを持たないため、ダークモードでファイルを変更するには、ダークファイルを追加してください。

テーマに要素を追従させるには、フィルレイヤー、テキストカラー、ボーダーカラー、またはアイコンカラーのスウォッチをクリックします。Styles タブをクリックしてスタイルエントリを選択し、静的な値をスタイルに置き換えます。必要な値を持つスタイルがない場合は、現在の値をスタイルとして保存してください。

画面の背景もテーマと同様に動作します。Screen settings のfillレイヤーにスタイルを適用してください。手順については、ダークモードで別の背景を表示するを参照してください。

画面上の多くの要素にスタイルを適用するには、AIエディターに例えば Apply the Card background style to all cards のように依頼してください。

ダークモードでフローをプレビューする

キャンバス下部のテーマアイコンをクリックすると、 Dark mode と Light mode を切り替えられます。

アイコンは、フローにダークテーマが設定されているか、ダークファイルを持つ画像または動画要素が含まれている場合にのみ表示されます。

ダークモードで別の画像や動画を表示する

画像または動画の要素は、ダークファイルを追加するまで両方のモードで同じファイルを表示します。ダークモードで別のファイルを表示するには：

1. 画像または動画の要素を選択します。
2. プロパティパネルの Image または Video セクションで、 Dark タブを選択します。キャンバスがダークモードのプレビューに切り替わります。
3. ダークモード用のファイルをアップロードします。

ライトモードのファイルを再度編集するには、 Light タブを選択します。

ステータスバーのテーマを設定する

ステータスバーの時刻やバッテリーアイコンが、フローの色と一部のモードで衝突することがあります。アイコンを見やすい状態に保つには、Status bar スイッチをオンにした状態で、Screen settings の Status bar theme を設定してください。

• : 白いアイコン。両方のモードで背景が暗い場合に使用します。
• : 黒いアイコン。両方のモードで背景が明るい場合に使用します。
• : デバイスの設定に従うアイコン。あるモードでは背景が明るく、別のモードでは暗い場合に使用します。

テーマを削除する

1. Styles パネルを開き、Colors タブを選択します。
2. 設定アイコンをクリックして、テーマ管理メニューを開きます。
3. メニュー項目を選択します：
   • Delete Dark theme: すべてのカラースタイルのライトバージョンを両方のモードで保持します。
   • Delete Light theme: すべてのカラースタイルのダークバージョンを両方のモードで保持します。