ライト／ダーク表示
Native UIは投影元の各要素の計算済みスタイルを読み取り、ライト／ダークの表示設定をネイティブレンダラーへ送ります。表示はWebのCSSで設定します。ネイティブ専用のダークモード起動オプションはありません。
表示の決定方法
最初に該当した行の設定が採用されます。
| 優先順位 | 投影元の計算済みスタイル | 結果 |
|---|---|---|
| 1 | テーマが提供する --ios27-color-scheme が空でない |
dark はダーク、それ以外はライトを選択します。iOS 27テーマのライト用・ダーク用スタイルシートがこのマーカーを設定します。 |
| 2 | --ion-background-color-rgb に3つのRGBチャンネルがある |
背景の明るさからダークかライトかを判定します。 |
| 3 | CSSの color-scheme に dark または light の一方だけが含まれる |
その配色を使います。light dark では単一の表示を指定できません。 |
| 4 | 上記のいずれにも該当しない | システムの prefers-color-scheme: dark 設定を使います。 |
テーマのマーカーとIonicの背景値は color-scheme より優先されます。任意のCSS背景色や文字色だけを変えても、ネイティブのライト／ダーク表示は選択されません。
Webテーマに合わせる
| Web側の構成 | 設定内容 |
|---|---|
| iOS 27テーマ | 対応するSystem、Class、Alwaysのダークモードの組み合わせを読み込みます。テーマが表示マーカーを設定します。 |
| 既存テーマを使うIonic | --ion-background-color-rgb を現在のパレットに合わせます。テーママーカーがない場合、ネイティブ表示はこの値を使います。 |
| 上記のテーマ変数を使わないHTML | 現在のWebテーマに合わせて color-scheme: light または color-scheme: dark を設定します。 |
| システムに追従するHTML表示 | システム設定に追従するCSSを使います。単一の配色が指定されていなければ、ネイティブ表示はシステム設定にフォールバックします。 |
たとえば、手動で切り替えるダークモード用クラスを持つプレーンHTMLアプリでは、次のように宣言できます。
:root {
color-scheme: light;
}
:root.app-dark {
color-scheme: dark;
}
アプリのダークパレットにも同じクラスを使います。この例は、優先順位の高い2つのテーマ変数が指定されていないことを前提としています。ランタイムの動作中は、クラス・スタイルの変更やシステムの表示設定の変更によって再評価されます。監視対象のDOM変更を伴わないスタイル変更では、適用後に shell.markForCheck() を呼び出してください。
Vertical Barsで共有される表示
通常のコントロールは、それぞれの投影元のスタイルから表示を決定します。Vertical Barsは1つのネイティブレールの表示を共有します。投影するコントロールのいずれかがダークであれば、レール全体がダーク表示になります。 レール内をライト領域とダーク領域に分けて描画することはありません。同じレールへ投影する要素には、一貫したWebパレットを適用してください。
ネイティブのライト／ダーク設定はシステムのマテリアルとコントロールの表示を選択するもので、任意のアプリCSSを再現するものではありません。垂直ボタンの塗りと色合いは、別途ボタンの表示設定で制御します。