配色
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 format をご覧ください。この rgb
の変数が必要な理由は The Alpha Problem をご覧ください。下のドロップダウンから選択することで、Ionic が提供するデフォルトの配色とそのバリエーションを確認することができます。
Name | Property | Default Value | Description |
---|
Modifying Colors
配色を変更するときは、その色についてリストされているすべてのバリエーションを変更する必要があります。例えば、secondary color
を
: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
はボタンのステータスが変更された時に利用されます。
ベースカラーからバリエーションカラーを取得する方法がわからない?その場合、 Color Generator をお試しください。これはすべてのバリエーションを計算し、アプリにコピー&ペーストできるコードを提供します!
CSS 変数についてもっと詳しく知りたい時は CSS Variables documentation をご覧ください。
配色の追加
カラーは、Ionic コンポーネントの 「color」 プロパティを設定するか、CSS を使用してスタイル設定することで、アプリケーション全体で使用できるように追加できます。新し いカラーを手動で追加する方法については、この後の 「New Color Creator」 を参照してください。コピーしてアプリケーションに貼り付ける新しいカラーのコードを簡単に生成する方法については、次の 「New Color Creator」 を参照してください。
新しいカラーを追加するには、最初にルートのカラーのすべてのバリエーションの 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 Variables documentation をご覧ください。
New Color Creator
名前と値を変更して以下で新しい色を作成し、以下のコードをコピーしてプロジェクトに貼り付けることで、その配色を 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);
}