Skip to main content
Version: v8

配色

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

デフォルトの配色を変更するために、 color 属性を使って任意の色を Ionic のコンポーネントに適用できます。以下の buttons はテキストと背景が color 属性に基づいて変更されていることに注目してください。button に 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 が提供するデフォルトカラーとそのバリエーションを確認できます。

NamePropertyDefault ValueDescription

色の変更​

配色を変更するときは、その色についてリストされているすべてのバリエーションを変更する必要があります。例えば、secondary color を に変更する時、以下の 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 だけではありません。contrast color #ffffff はテキストに適用され、それに加えて shade #005a00 と tint #1a751a はボタンのステータスが変更された時に利用されます。

note

ベースカラーからバリエーションカラーを取得する方法がわからない？その場合、 Color Generator をお試しください。これはすべてのバリエーションを計算し、アプリにコピー&ペーストできるコードを提供します！

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 変数ドキュメントを参照してください。

新しい色の作成​

名前と値を変更して以下で新しい色を作成し、以下のコードをコピーしてプロジェクトに貼り付けることで、その配色を Ionic プロジェクトで利用できます。

: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);
}

Contents

Edit this page