ライト／ダーク表示

Native UIは投影元の各要素の計算済みスタイルを読み取り、ライト／ダークの表示設定をネイティブレンダラーへ送ります。表示はWebのCSSで設定します。ネイティブ専用のダークモード起動オプションはありません。

表示の決定方法

最初に該当した行の設定が採用されます。

テーマのマーカーとIonicの背景値は color-scheme より優先されます。任意のCSS背景色や文字色だけを変えても、ネイティブのライト／ダーク表示は選択されません。

Webテーマに合わせる

たとえば、手動で切り替えるダークモード用クラスを持つプレーンHTMLアプリでは、次のように宣言できます。

:root {
  color-scheme: light;
}

:root.app-dark {
  color-scheme: dark;
}

アプリのダークパレットにも同じクラスを使います。この例は、優先順位の高い2つのテーマ変数が指定されていないことを前提としています。ランタイムの動作中は、クラス・スタイルの変更やシステムの表示設定の変更によって再評価されます。監視対象のDOM変更を伴わないスタイル変更では、適用後に shell.markForCheck() を呼び出してください。

Vertical Barsで共有される表示

通常のコントロールは、それぞれの投影元のスタイルから表示を決定します。Vertical Barsは1つのネイティブレールの表示を共有します。投影するコントロールのいずれかがダークであれば、レール全体がダーク表示になります。 レール内をライト領域とダーク領域に分けて描画することはありません。同じレールへ投影する要素には、一貫したWebパレットを適用してください。

ネイティブのライト／ダーク設定はシステムのマテリアルとコントロールの表示を選択するもので、任意のアプリCSSを再現するものではありません。垂直ボタンの塗りと色合いは、別途ボタンの表示設定で制御します。

Web オーバーレイの下に表示する一時画像

操作を遮断する Web オーバーレイのためにネイティブコントロールを前面から退避させる必要がある場合、ランタイムは各元の Web コンポーネントまたはその Vertical Bars クローン上に準備済み画像を表示できます。これは表示のハンドオフであり、別の操作可能なコントロールではありません。オーバーレイのライフサイクル、バックドロップ、フォーカス、終了処理は引き続き Ionic が管理します。

ソースの所有権とピクセル表示のライフタイムは異なります。Native の所有権は投影が受け付けられた時点で始まり、一時画像の要求、準備、移動、サイズ変更、復元を通じて維持されます。画像の所有権が決めるのは、その時点でライブの Native コントロールをどのピクセルが置き換えるかだけです。読み取りの延期や省略は、ソースを Web に戻すという判断ではありません。画像や遷移の維持期間以外で、アプリが明示的に非表示にした場合は、現在の投影適格性が終了します。レールを使わなくなった Modal も、Native レールの選択を終了します。

ハンドオフは次の規則に従います：

1. ネイティブ更新が受け付けられた後に画像を準備し、その後の視覚的変更をまとめます。タッチ中はキャプチャしません。代わりの画像を準備している間は、最後に完成した画像を保持します。Web クローンは挿入やレイアウトの前に準備済み状態を受け取り、ハンドオフまでは合成レイヤー全体として非表示にします。これにより、その外観がライブのネイティブガラスに透けて見えることを防ぎます。
2. 表示時には、キャプチャ、エンコード、デコード、ブリッジの応答を待たずに準備済み画像を再利用します。ハンドオフの完了のためにアプリのクリックを遅らせたり、再実行したりしてはいけません。
3. Web バックドロップの下にあるソースサーフェス上へ画像を配置します。オーバーレイが presentingElement をアニメーションさせる場合は、その要素内に準備済みの画像専用レイヤーを付け、画像が背景と同じ変形、フィルター、クリッピングを受けるようにします。実際の Ionic コントロールは移動しません。受け付け済みの Native 境界をレンダラーの既存の画像ターゲットに変換し、各フレームで再キャプチャやコントロールの再構築をせず、そのターゲットに移動を担わせます。共有ネイティブレールでは、退避するすべてのコントロールの画像が必要です。
4. 遷移中にコントロールを操作できない場合は、アニメーションを滑らかに運ぶために画像を要求します。Modal の表示と終了もこの規則に従います。画像の表示は Native のソース所有権を移しません。準備済み画像がなくても Native の所有権は維持されます。オーバーレイは操作可能な Web コピーを露出させず、ライブのコントロールを抑制できます。ドラッグ、スナップ、クリッピングについては Modal レールの移動を参照してください。
5. 復帰時には現在の位置にネイティブコントロールを再作成し、対応するネイティブ更新が受け付けられた後に画像を削除します。復元要求後に開始され、キャプチャしたすべてのコントロールを受け付けた更新だけが復帰を確認できます。画像を削除する前に Native の所有権を設定し、Web から Native へのクロスフェードは行いません。古い応答や部分的な応答で、新しいハンドオフを終了させてはいけません。削除するのは一時的な復帰用コピーだけです。すぐに再度開けるよう、代わりが準備できるまで有効な準備済み画像を保持します。一時サーフェス全体を移動する場合、ソースのサイズとサーフェスに対する相対位置が変わらなければ画像を維持します。ハンドオフには現在の移動先座標を使用します。サーフェス内部や外観の変更はキャッシュを無効化します。Modal の画像を戻せるのは、その画像を提供した Modal だけです。
6. 対応できないビューポート変更、レイアウト変更、画像自身のソースの外観変更があった場合は画像を破棄します。別のサーフェスの変更では、完成した画像は無効になりません。画像の解放や準備の失敗によって、ソースが Web に戻ることはありません。Native のソース所有権が終了するのは、明示的な Web への引き渡し、ソースが未対応または未選択になった場合、Native の拒否またはランタイム障害、ソースまたはコンテキストの破棄だけです。画像がない場合、オーバーレイはライブの Native コントロールを一時的に抑制できますが、Web コピーが操作可能になるわけではありません。

Native ナビゲーションを伴わないスコープ付きの中断、または covered: true を指定しない runtime.suspend() は、Web 表示への明示的な要求です。Native ナビゲーションの中断は、オーバーレイが再生を妨げても選択済みのソースリースを維持します。ページ選択は ionViewWillLeave で停止できますが、ソースの所有権が終了するのは、コンテキストが離れた後、または Native ナビゲーションのコミットが確認された後です。Modal のコンテキストは終了アニメーションの開始時ではなく、ionModalDidDismiss で終了します。

背景のコントロールと移動中の Modal 上のコントロールは、同じ画像ライフサイクルを使います。異なる座標サーフェス上で同時に表示される可能性があるため、画像の所有権は別々に保持します。Modal は移動後の復帰座標を提供し、コンポーネントアダプターはネイティブの境界と Web 描画先を提供します。Engine は共通の画像ハンドオフプロトコル、座標変換、コピーの削除を管理します。Native UI は対象となるネイティブ境界を提供し、どの共有コンテナ全体を隠せるかを判断して、通常のネイティブレイアウトと更新の確認応答を適用します。コンポーネントアダプターは、キャプチャ、ハンドオフ、失敗時のポリシーを別途定義しません。JavaScript が所有権の属性を更新し、常設のランタイム CSS が非表示と画像の可視性を制御します。画像ごとのスタイルには位置・寸法と画像 URL だけが含まれるため、画像を解放しても Web クローンに対する Native の所有権は解放されません。

画像が利用できても、コントロールの無効状態を変更したり、アクションを発行したり、フォーカストラップを回避したり、オーバーレイを長引かせたりしてよいわけではありません。アプリ内拡張も同じオーバーレイ前の画像規則を使います。オーバーレイが操作を遮断している間、画像は最後に準備された内容を固定表示します。画像ハンドオフをコンポーネントで有効にする前に、ぼかしを含め、実際に表示されるネイティブマテリアルと比較してキャプチャの再現性を確認してください。

Modal レールの移動

Modal レールのコントロールは、テーマのレイアウトが提供する予約済みツールバー境界を使います。ランタイムが次の規則を自動で適用するため、アプリにドラッグリスナーやフレームごとの位置更新は不要です。

表示と終了は、移動の規則より優先されます。スナップアニメーションは落ち着くまで移動の一部です。カスタムレイアウトが信頼できる境界位置を公開しない場合、ランタイムは固定境界を仮定せず、従来の画像追従経路を維持します。

画像ターゲットは Modal ダイアログの内側にあるため、その変形と一緒に移動します。Native のソース所有権は、表示、移動、サイズ変更、画像の復元を通じて受け付け済みコントロールに残ります。Modal コンテキストが閉じられた場合、または別の明示的な解放条件が適用された場合に終了します。標準、カード、シートの Modal は、レールと重なる場合に同じ規則を使います。Ionic の ionViewWillLeave は新しいページ選択を停止しますが、現在の Modal ポリシーが操作不能な画像表示を必要としている間は、準備済み画像がなくても受け付け済みコントロールを破棄しません。明示的な Web 選択、ソースの削除、バインディングの変更、コンテキストの終了は、引き続きそれらのコントロールを解放します。Native レンダラーは、ピクセルが隠されている間もマウントされたままです。開始と復帰には、他のサーフェスと同じ準備済み画像のハンドオフを使います。一時的な Native コピーが確認応答と Web 描画の境界をつなぎ、移動する画像は Modal ダイアログ内に留まります。Native 境界を利用できる場合、更新はレイアウトを確認する前にツールバーガイドを適用します。そうでなければ、位置合わせは後続のレイアウト処理まで待ちます。共通のハンドオフは、受け付けられた更新でソース所有権を変えずに画像を終了します。共有レールは、いずれかのコントロールのピクセルを画像が所有している間、全体を隠したままにします。

境界より下では、最初のレールアクションを Web ツールバーのタイトルの中央に揃えます。Native ボタンの境界が位置合わせを決め、デバイスが予約するレール上端を下限とします。境界を利用できる場合、Native は更新を確認する前に位置合わせを適用するため、コントロールの表示時に未調整のフレームが露出しません。画像ターゲットは同じツールバーアンカーを使い、後続のアクションは Native の間隔を維持し、Modal 下部のレイアウトはその位置を保ちます。

Modal レール画像の外観

Modal レールのハンドオフは、周囲のウィンドウ背景を含めず Native レンダラーのビューをキャプチャします。ボタンの外側の透明ピクセルは現在の Modal サーフェスになじむため、これらの画像に DOM の形状クリップは不要です。これは ion-buttons グループ全体と、個別に投影された ion-button コントロールの両方に適用されます。通常の Modal コントロールは従来の経路を維持します。

ガラスの内側にはキャプチャした背景が含まれる場合があり、反射、屈折、影、縁のハイライトはライブの Native 描画と異なることがあります。背景を含まないガラスマテリアルではありません。ページのレールと他のサーフェスは、周囲の影を含むウィンドウの合成キャプチャを維持します。このハンドオフには Engine の JavaScript とネイティブ実装の一致が必要です。Web バンドルだけを更新しても、ネイティブのハンドオフプロトコルは更新されません。