メインコンテンツへスキップ
バージョン：v8

カラー

Ionicには、多くのコンポーネントの色を変更するために使用できる9つのデフォルトの色があります。各色は、Ionic全体で使用されるshadeとtintを含む複数のプロパティのコレクションです。

color属性を使用して、Ionicコンポーネントに色を適用してデフォルトの色を変更できます。下のボタンでは、設定されたcolorに基づいてテキストと背景が変化することに注意してください。ボタンにcolorが設定されていない場合、デフォルトでprimary色が使用されます。

<ion-button>Default</ion-button>
<ion-button color="primary">Primary</ion-button>
<ion-button color="secondary">Secondary</ion-button>
<ion-button color="tertiary">Tertiary</ion-button>
<ion-button color="success">Success</ion-button>
<ion-button color="warning">Warning</ion-button>
<ion-button color="danger">Danger</ion-button>
<ion-button color="light">Light</ion-button>
<ion-button color="medium">Medium</ion-button>
<ion-button color="dark">Dark</ion-button>

階層化されたカラー​

各色は、base、contrast、shade、tintというプロパティで構成されます。baseとcontrastの色には、rgb形式の色と同じrgbプロパティも必要です。rgbプロパティが必要な理由については、アルファ問題を参照してください。以下のドロップダウンから選択して、Ionicが提供するすべてのデフォルトカラーとそのバリエーションを確認してください。

名前プロパティデフォルト値説明

色の変更​

色のデフォルト値を変更するには、その色のリストされているすべてのバリエーションを設定する必要があります。たとえば、セカンダリの色を#006600に変更するには、次のCSSプロパティを設定します。

:root {
  --ion-color-secondary: #006600;
  --ion-color-secondary-rgb: 0, 102, 0;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #005a00;
  --ion-color-secondary-tint: #1a751a;
}

ボタンにsecondaryが適用されると、ベースカラー#006600だけでなく、テキストにはコントラストカラー#ffffffが、ボタンのさまざまな状態にはシェード#005a00とティント#1a751aの色が使用されます。

注記

ベースカラーからバリエーションカラーを取得する方法がわからない場合、すべてのバリエーションを計算し、アプリにコピーアンドペーストできるコードを提供するカラージェネレーターを試してみてください！

CSS変数に関する詳細については、CSS変数のドキュメントを参照してください。

カラーの追加​

Ionicコンポーネントにcolorプロパティを設定するか、CSSでスタイル設定することで、アプリケーション全体で使用するために色を追加できます。新しい色を手動で追加する方法、または下記の新しいカラークリエーターを使用して新しい色のコードをすばやく生成し、アプリケーションにコピーアンドペーストする方法については、以下をお読みください。

新しい色を追加するには、まずルートでその色のすべてのバリエーションのCSS変数を定義します。たとえば、favoriteという新しい色を追加するには、次の変数を定義できます。

:root {
  --ion-color-favorite: #69bb7b;
  --ion-color-favorite-rgb: 105, 187, 123;
  --ion-color-favorite-contrast: #ffffff;
  --ion-color-favorite-contrast-rgb: 255, 255, 255;
  --ion-color-favorite-shade: #5ca56c;
  --ion-color-favorite-tint: #78c288;
}

次に、これらのCSS変数を使用する新しいクラスを作成します。クラスは.ion-color-{COLOR}の形式で記述する必要があり、{COLOR}は追加する色の名前です。

.ion-color-favorite {
  --ion-color-base: var(--ion-color-favorite);
  --ion-color-base-rgb: var(--ion-color-favorite-rgb);
  --ion-color-contrast: var(--ion-color-favorite-contrast);
  --ion-color-contrast-rgb: var(--ion-color-favorite-contrast-rgb);
  --ion-color-shade: var(--ion-color-favorite-shade);
  --ion-color-tint: var(--ion-color-favorite-tint);
}

クラスを追加したら、colorプロパティをサポートする任意のIonicコンポーネントでその色を使用できます。Ionicボタンでfavorite色を使用する例を以下に示します。

<ion-button color="favorite">Favorite</ion-button>

ルートで定義されたCSS変数は、CSSを使用して任意の要素のスタイル設定にも使用できます。

div {
  background: var(--ion-color-favorite);
  color: var(--ion-color-favorite-contrast);
}

CSS変数の設定と使用方法の詳細については、CSS変数のドキュメントを参照してください。

新しいカラークリエーター​

以下で、名前と値を変更して新しい色を作成し、以下のコードをプロジェクトにコピーアンドペーストします。

:root {
	--ion-color-new: #69bb7b;
	--ion-color-new-rgb: 105,187,123;
	--ion-color-new-contrast: #000000;
	--ion-color-new-contrast-rgb: 0,0,0;
	--ion-color-new-shade: #5ca56c;
	--ion-color-new-tint: #78c288;
}

.ion-color-new {
	--ion-color-base: var(--ion-color-new);
	--ion-color-base-rgb: var(--ion-color-new-rgb);
	--ion-color-contrast: var(--ion-color-new-contrast);
	--ion-color-contrast-rgb: var(--ion-color-new-contrast-rgb);
	--ion-color-shade: var(--ion-color-new-shade);
	--ion-color-tint: var(--ion-color-new-tint);
}

目次

このページを編集