メインコンテンツまでスキップ
Version: v6

高度なカスタマイズ

CSSベースのテーマ設定では、CSSファイルをロードするか、いくつかのCSSプロパティ値を変更することで、アプリの配色をすばやくカスタマイズできます。

theme-color Meta

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

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

note

Theme-colorメタは、WebブラウザまたはPWAとして実行するときにインターフェースのテーマを制御し、アプリがCapacitorまたはCordovaを使用してデプロイされるときには影響しません。ステータスバーの下の領域をカスタマイズしたい場合は、Capacitor Status Bar Pluginを使用することをお勧めします。

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

<meta name="theme-color" media="(prefers-color-scheme: light)" content="#3880ff" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#eb445a" />
Light ModeDark Mode
Application with theme-color meta in light modeApplication with theme-color meta in dark mode

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

iOS 15とmacOSのSafariは自動的に適切なテーマカラーを決定しますが、テーマをより細かく制御したい場合はこのmetaタグを追加すると便利です。

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

note

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

詳しくは、MDN theme-color documentation をご覧ください。

グローバル変数

テーマセクションのアプリケーション変数とステップ変数は、アプリケーションの色を変更するのに便利ですが、しばしば、複数のコンポーネントで使用される変数が必要になることがあります。以下の変数は、コンポーネント間で共有され、グローバルなパディング設定などを変更することができます。

Application Variables

NameDescription
--ion-font-familyFont family of the app
--ion-statusbar-paddingStatusbar padding top of the app
--ion-safe-area-topAdjust the safe area inset top of the app
--ion-safe-area-rightAdjust the safe area inset right of the app
--ion-safe-area-bottomAdjust the safe area inset bottom of the app
--ion-safe-area-leftAdjust the safe area inset left of the app
--ion-marginAdjust the margin of the Margin attributes
--ion-paddingAdjust the padding of the Padding attributes

Grid Variables

NameDescription
--ion-grid-columnsNumber of columns in the grid
--ion-grid-padding-xsPadding of the grid for xs breakpoints
--ion-grid-padding-smPadding of the grid for sm breakpoints
--ion-grid-padding-mdPadding of the grid for md breakpoints
--ion-grid-padding-lgPadding of the grid for lg breakpoints
--ion-grid-padding-xlPadding of the grid for xl breakpoints
--ion-grid-column-padding-xsPadding of the grid columns for xs breakpoints
--ion-grid-column-padding-smPadding of the grid columns for sm breakpoints
--ion-grid-column-padding-mdPadding of the grid columns for md breakpoints
--ion-grid-column-padding-lgPadding of the grid columns for lg breakpoints
--ion-grid-column-padding-xlPadding of the grid columns for xl breakpoints

既知の変数の制限

The Alpha Problem

16進数カラーのアルファ使用については、まだ完全なブラウザサポートはありません。rgba() 関数は、R, G, B, A (Red, Green, Blue, Alpha) のフォーマットのみ利用可能です。次のコードは、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! */
}
note

See the CSS Variables section for more information on how to get and set CSS variables.

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形式の色はhexプロパティとまったく同じ色ですが、現在は rgba() で使用できることに注意してください。例えば、--ion-text-color-rgb は以下のように利用できます。

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

Variables in Media Queries

メディアクエリ のCSS変数は現在サポートされていませんが、この問題を解決するcustom media queries と custom environment variablesを追加するためのオープンドラフトがあります。ただし、現在のサポート状態では、次の機能は動作しません。

:root {
  --breakpoint: 600px;
}

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

CSSカラー変数の変更

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

正確に説明します。基本的に、SassなどのCSSプリプロセッサを使用すると、関数を使用して単一の色を操作できます。たとえば、Sassには次のカラーを作成できます:

// Background color, shade, and tint
$background: #3880ff;
$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);

After running through the Sass compiler, the colors will have the following values:

VariableValue
$background
#3880ff
$background-shade
#3171e0
$background-tint
#4c8dff
$text
#444444
$text-darker
#1e1e1e
$text-lighter
#6a6a6a

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

これは通常は問題にはなりませんが、アプリケーションに動的なテーマカラーの設定が必要な場合は問題になります。Ionicでは、これが各色にバリエーションがある理由であり、テーマ設定にstepped colorsが必要な理由でもあります。

これを可能にするcolor modification proposalsを議論している草案とIssuesはこちらからご覧いただけます。

Contents

このページを編集