跳至主要內容
版本：v8

顏色

Ionic 有九種預設顏色，可用來變更許多元件的顏色。實際上，每個顏色都是多個屬性的集合，包括在整個 Ionic 中使用的 shade 和 tint。

可以將顏色套用至 Ionic 元件，以便使用 color 屬性變更預設顏色。請注意，在下方的按鈕中，文字和背景會根據設定的 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 格式表示。請參閱Alpha 問題，以瞭解為什麼也需要 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);
}

目錄

編輯此頁面