高度なテーマ設定

CSS ベースのテーマ設定により、CSS ファイルを読み込んだり、いくつかの CSS プロパティ値を変更するだけで、アプリの色をすばやくカスタマイズできます。

theme-color メタ

メタタグのtheme-color値は、ブラウザがページまたは周辺インターフェースの表示をカスタマイズするために使用できる色を示します。この種のメタタグは、メディアクエリを受け入れることもでき、開発者はライトモードとダークモードの両方のテーマカラーを設定できます。

theme-color メタのcontent値には、有効なCSS 色を含める必要があり、CSS 変数は含めることができません。

注記

theme-color メタは、Web ブラウザまたは PWA で実行する場合のインターフェーステーマを制御し、Capacitor または Cordova を使用してアプリを展開する場合には効果がありません。ステータスバーの下の領域をカスタマイズする場合は、Capacitor ステータスバープラグインを使用することをお勧めします。

以下の例は、iOS 15 でブラウザインターフェースのスタイルにtheme-colorを使用する方法を示しています。

<meta name="theme-color" media="(prefers-color-scheme: light)" content="#0054e9" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#eb445a" />

ライトモード	ダークモード

theme-color メタは、macOS Monterey 以降の Safari のツールバーのカスタマイズにも使用できます。

iOS 15 および macOS の Safari は、使用する適切なテーマカラーを自動的に決定しますが、このメタタグを追加すると、テーマをより細かく制御するのに役立ちます。

ブラウザインターフェースと干渉するため、ブラウザで使用されない色の小さなサブセットがあります。たとえば、content="red"を設定しても、macOS の Safari では機能しません。これは、その色がツールバーの赤い閉じるボタンと干渉するためです。このような状況が発生した場合は、色の選択を少し変更してみてください。

注記

両方が存在する場合、ブラウザはmanifest.jsonのthemeよりもtheme-colorメタを優先します。

詳細については、MDN theme-color ドキュメントを参照してください。

グローバル変数

テーマセクションのアプリケーション変数と段階変数は、アプリケーションの色を変更するのに役立ちますが、多くの場合、複数のコンポーネントで使用される変数が必要になります。次の変数は、グローバルなパディング設定などを変更するために、コンポーネント間で共有されます。

アプリケーション変数

名前	説明
--ion-font-family	アプリのフォントファミリー
--ion-statusbar-padding	アプリのステータスバーパディングトップ
--ion-safe-area-top	アプリのセーフエリアインセットトップを調整します
--ion-safe-area-right	アプリのセーフエリアインセットライトを調整します
--ion-safe-area-bottom	アプリのセーフエリアインセットボトムを調整します
--ion-safe-area-left	アプリのセーフエリアインセットレフトを調整します
--ion-margin	マージン属性のマージンを調整します
--ion-padding	パディング属性のパディングを調整します
--ion-placeholder-opacity	input、textarea、searchbar、select コンポーネントで使用されるプレースホルダーの不透明度を調整します

グリッド変数

名前	説明
--ion-grid-columns	グリッド内の列数
--ion-grid-padding-xs	xs ブレイクポイントのグリッドのパディング
--ion-grid-padding-sm	sm ブレイクポイントのグリッドのパディング
--ion-grid-padding-md	md ブレイクポイントのグリッドのパディング
--ion-grid-padding-lg	lg ブレイクポイントのグリッドのパディング
--ion-grid-padding-xl	xl ブレイクポイントのグリッドのパディング
--ion-grid-column-padding-xs	xs ブレイクポイントのグリッド列のパディング
--ion-grid-column-padding-sm	sm ブレイクポイントのグリッド列のパディング
--ion-grid-column-padding-md	md ブレイクポイントのグリッド列のパディング
--ion-grid-column-padding-lg	lg ブレイクポイントのグリッド列のパディング
--ion-grid-column-padding-xl	xl ブレイクポイントのグリッド列のパディング

変数の既知の制限

アルファ問題

16進数の色のアルファの使用に関するブラウザのサポートはまだ完全ではありません。rgba()関数は、R, G, B, A（赤、緑、青、アルファ）形式の値のみを受け入れます。次のコードは、rgba()に渡される正しい値と正しくない値の例を示しています。

/* These examples use the same color: blueviolet. */
.broken {
  --violet: #8a2be2;

  /* rgba(#8a2be2, .5) */
  color: rgba(var(--violet), 0.5); /* ERROR! Doesn't support hex. */
}

.working {
  --violet-rgb: 138, 43, 226;

  /* rgba(138, 43, 226, .5) */
  color: rgba(var(--violet-rgb), 0.5); /* WORKS! */
}

注記

CSS 変数の取得と設定方法の詳細については、CSS 変数セクションを参照してください。

Ionic は、いくつかのコンポーネントで不透明度（アルファ）のある色を使用しています。これが機能するためには、これらのプロパティを RGB 形式で指定する必要があります。-rgbで終わるバリエーションを持つプロパティを変更する場合は、**括弧なしで**カンマ区切りの形式で指定することが重要です。テキストと背景の色を変更する例を以下に示します。

:root {
  /* These examples use the same color: sienna. */
  --ion-text-color: #a0522d;
  --ion-text-color-rgb: 160, 82, 45;

  /* These examples use the same color: lightsteelblue. */
  --ion-background-color: #b0c4de;
  --ion-background-color-rgb: 176, 196, 222;
}

RGB 形式の色は、16進数のプロパティとまったく同じ色ですが、rgba()で使用できるようになりました。たとえば、--ion-text-color-rgbは、次の方法で使用できます。

body {
  color: rgba(var(--ion-text-color-rgb), 0.25);
}

メディアクエリでの変数

メディアクエリでの CSS 変数は現在サポートされていませんが、この問題を解決するカスタムメディアクエリとカスタム環境変数を追加するための公開ドラフトがあります！ただし、現在のサポート状況では、以下は**機能しません**

:root {
  --breakpoint: 600px;
}

@media (min-width: var(--breakpoint)) {
  /* Doesn't work :( */
}

CSS カラー変数の変更

Sass の組み込み関数を使用して色を簡単に変更することはできますが、CSS 変数で設定された色を変更することは現在それほど簡単ではありません。これは、RGBまたはHSLチャネルを分割して各値を変更することで CSS で実現できますが、複雑で機能が不足しています。

これは具体的に何を意味するのでしょうか？基本的に、Sass などの CSS プリプロセッサを使用すると、関数を使用して単一の色を操作できます。たとえば、Sass で次の色を作成できます。

// Background color, shade, and tint
$background: #0054e9;
$background-shade: mix(#000, $background, 12%);
$background-tint: mix(#fff, $background, 10%);

// Text color, darker and lighter
$text: #444;
$text-darker: darken($text, 15);
$text-lighter: lighten($text, 15);

Sass コンパイラを実行した後、色は次の値になります。

変数	値
$background	#0054e9
$background-shade	#004acd
$background-tint	#1a65eb
$text	#444444
$text-darker	#1e1e1e
$text-lighter	#6a6a6a

ただし、CSS 変数は実行時に設定でき、より動的であるため、現在では単純な関数を使用して操作することはできません。

通常は問題になりませんが、アプリケーションで動的なテーマ設定が必要な場合、問題が発生します。Ionicでは、これが各色にバリエーションがある理由であり、また段階的な色がテーマ設定に必要となる理由でもあります。

これを可能にする色の変更に関する提案について、ドラフトと課題が議論されています。

セーフエリアパディング

ディスプレイのセーフエリアとは、デバイスのノッチ、ステータスバー、またはデバイスのUIの一部でありアプリの一部ではないその他の要素によって覆われていない部分です。セーフエリアの寸法は、デバイスと向き（縦向きまたは横向き）によって異なります。

たとえば、以下はiPhone 14 Pro Maxのスクリーンショットです。赤い部分がセーフエリアで、白い部分はアプリのコンテンツが隠れてしまう部分です。

縦向き	横向き

これに対応するために、Ionicは特定のコンポーネントに自動的にパディングを追加します。たとえば、ion-modal内に配置された最初のion-toolbarコンポーネントには、デバイスのセーフエリアの上端に合わせてパディングが追加されます。これにより、デバイスのノッチによってヘッダーテキストが隠れるのを防ぎます。

このパディングは、アプリケーション変数で説明されている--ion-safe-area-(dir)変数を使用してCSSで手動で調整できます。値は、アプリケーション全体またはコンポーネントごとに設定できます。例:

html {
  --ion-safe-area-left: 25px;
}

ion-modal {
  --ion-safe-area-top: 0;
}