CSS変数

Ionic のコンポーネントは、アプリケーションを簡単にカスタマイズできるようにCSS 変数を使用して構築されています。CSS 変数を使用すると、1 か所に保存している値を、他の複数の場所から参照できます。また、実行時に動的に CSS を変更することを可能にします（以前は CSS プリプロセッサが必要でした）。CSS 変数を使用すると、ブランディングやテーマに合わせて Ionic コンポーネントをオーバーライドすることが、これまでになく簡単になります。

変数の設定

グローバル変数

CSS 変数は、アプリケーションの :root セレクタでグローバルに設定できます。They can also be applied only for a specific mode. Ionic が提供するグローバル変数の詳細については、Ionic 変数を参照してください。

Ionic CLI を使用して Angular プロジェクトを開始すると Ionic のデフォルト変数を上書きすることができる src/theme/variables.scss が作成されます。

/* Set variables for all modes */
:root {
  /* Set the background of the entire app */
  --ion-background-color: #ff3700;

  /* Set the font family of the entire app */
  --ion-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Roboto', sans-serif;
}

/* Set text color of the entire app for iOS only */
.ios {
  --ion-text-color: #000;
}

/* Set text color of the entire app for Material Design only */
.md {
  --ion-text-color: #222;
}

コンポーネント変数

特定のコンポーネントに CSS 変数を設定するには、そのセレクタの内側に変数を追加します。Ionic が提供するコンポーネントレベルの変数の詳細については、Ionic Variables を参照ください。

/* Set the color on all ion-button elements */
ion-button {
  --color: #222;
}

/* Set the background on an ion-button with the .fancy-button class */
.fancy-button {
  --background: #00ff00;
}

JavaScript で変数を設定

CSS 変数はsetProperty() を使って JavaScript で変更することもできます:

const el = document.querySelector('.fancy-button');
el.style.setProperty('--background', '#36454f');

変数を利用する

CSS での使い方

CSS の var() 関数 を使うと、失敗した時の設定とともに CSS 変数を取得することができます。 例えば、以下の例では --background プロパティに --charcoal 変数を利用しますが、もし値を取得できなければ代わりに #36454f が適用されます。

.fancy-button {
  --background: var(--charcoal, #36454f);
}

JavaScript での使い方

CSS 変数の値は、getPropertyValue() を使用して JavaScript で読み取ることができます:

const el = document.querySelector('.fancy-button');
const color = el.style.getPropertyValue('--charcoal');

Ionic 変数

Component 変数

Ionic は、--background や --color のようなコンポーネントレベルの変数を提供します。コンポーネントが受け入れるカスタムプロパティについては、 API reference の CSS Custom Properties セクションをご覧ください。たとえば、Button Custom Properties をご覧ください。

グローバル変数

アプリケーション全体のテーマを簡単に変更できるように Ionic が提供するグローバル変数がいくつかあります。すべてのグローバル変数のリストは Colors, Themes and Advanced Theming をご覧ください。