跳至主要內容
版本：v8

主題

Ionic 提供數個全域變數，這些變數會在整個元件中使用，以變更整個應用程式的預設主題。應用程式顏色對於變更大多數 Ionic 元件的外觀很有用，而階梯式顏色則用作某些 Ionic 元件中的變體。

應用程式顏色​

應用程式顏色在 Ionic 的多個地方使用。這些對於輕鬆建立深色調色板或與品牌相符的主題很有用。

務必注意，背景和文字顏色變數也需要設定為 rgb 格式的 rgb 變數。請參閱Alpha 問題，以了解為什麼也需要 rgb 屬性。

名稱描述
--ion-background-color整個應用程式的背景顏色
--ion-background-color-rgb整個應用程式的背景顏色，rgb 格式
--ion-text-color整個應用程式的文字顏色
--ion-text-color-rgb整個應用程式的文字顏色，rgb 格式
--ion-backdrop-color背景組件的顏色
--ion-backdrop-opacity背景組件的不透明度
--ion-overlay-background-color覆蓋的背景顏色
--ion-border-color邊框顏色
--ion-box-shadow-color陰影顏色
--ion-tab-bar-background分頁列的背景
--ion-tab-bar-background-focused焦點分頁列的背景
--ion-tab-bar-border-color分頁列的邊框顏色
--ion-tab-bar-color分頁列的顏色
--ion-tab-bar-color-selected選取的分頁按鈕的顏色
--ion-toolbar-background工具列的背景
--ion-toolbar-border-color工具列的邊框顏色
--ion-toolbar-color工具列中元件的顏色
--ion-toolbar-segment-color工具列中區段按鈕的顏色
--ion-toolbar-segment-color-checked工具列中勾選的區段按鈕的顏色
--ion-toolbar-segment-background工具列中區段按鈕的背景
--ion-toolbar-segment-background-checked工具列中區段按鈕的背景
--ion-toolbar-segment-indicator-color工具列中區段按鈕指示器的顏色
--ion-item-background項目的背景
--ion-item-border-color項目的邊框顏色
--ion-item-color項目中元件的顏色
--ion-placeholder-color輸入中預留位置的顏色

階梯式顏色​

在探索自訂 Ionic 主題的不同方式之後，我們發現我們無法只使用一種背景或文字顏色。為了在整個設計中暗示重要性和深度，我們需要使用不同深淺的背景和文字顏色。為了適應這種模式，我們建立了階梯式顏色。

雖然更新背景 (--ion-background-color) 和文字 (--ion-text-color) 變數會變更大多數元件的應用程式外觀，但在某些 Ionic 元件中，它可能會看起來很奇怪或損毀。當應用較深的調色板時，這會更明顯。

在某些元件中，我們使用的陰影比背景深或比文字淺。例如，項目標題文字可能需要是 #404040，這比我們的預設文字顏色淺一些陰影。同時，載入元件背景是比白色深的陰影，使用 #f2f2f2。我們使用階梯式顏色來定義這些細微的變化。更新應用程式的背景或文字顏色時，務必更新階梯式顏色。

Ionic 為文字和背景顏色提供個別的階梯顏色，以便可以單獨更新。這對於使用文字和背景階梯式顏色的元件很有用，並允許我們有效地實作高對比調色板。

依預設，Ionic 文字階梯式顏色從預設文字顏色值 #000000 開始，並使用遞增的百分比與背景顏色值 #ffffff 混合。Ionic 背景階梯式顏色從預設背景顏色值 #ffffff 開始，並使用遞增的百分比與文字顏色值 #000000 混合。階梯式顏色的完整清單顯示在下方的產生器中。

階梯式顏色產生器​

為您的應用程式建立自訂背景和文字顏色主題。更新下方背景或文字顏色的十六進位值，然後將產生的程式碼直接複製並貼到您的 Ionic 專案中。

背景

文字

:root {
	--ion-background-color: #ffffff;
	--ion-background-color-rgb: 255,255,255;

	--ion-text-color: #000000;
	--ion-text-color-rgb: 0,0,0;

	--ion-text-color-step-50: #0d0d0d;
	--ion-text-color-step-100: #1a1a1a;
	--ion-text-color-step-150: #262626;
	--ion-text-color-step-200: #333333;
	--ion-text-color-step-250: #404040;
	--ion-text-color-step-300: #4d4d4d;
	--ion-text-color-step-350: #595959;
	--ion-text-color-step-400: #666666;
	--ion-text-color-step-450: #737373;
	--ion-text-color-step-500: #808080;
	--ion-text-color-step-550: #8c8c8c;
	--ion-text-color-step-600: #999999;
	--ion-text-color-step-650: #a6a6a6;
	--ion-text-color-step-700: #b3b3b3;
	--ion-text-color-step-750: #bfbfbf;
	--ion-text-color-step-800: #cccccc;
	--ion-text-color-step-850: #d9d9d9;
	--ion-text-color-step-900: #e6e6e6;
	--ion-text-color-step-950: #f2f2f2;

	--ion-background-color-step-50: #f2f2f2;
	--ion-background-color-step-100: #e6e6e6;
	--ion-background-color-step-150: #d9d9d9;
	--ion-background-color-step-200: #cccccc;
	--ion-background-color-step-250: #bfbfbf;
	--ion-background-color-step-300: #b3b3b3;
	--ion-background-color-step-350: #a6a6a6;
	--ion-background-color-step-400: #999999;
	--ion-background-color-step-450: #8c8c8c;
	--ion-background-color-step-500: #808080;
	--ion-background-color-step-550: #737373;
	--ion-background-color-step-600: #666666;
	--ion-background-color-step-650: #595959;
	--ion-background-color-step-700: #4d4d4d;
	--ion-background-color-step-750: #404040;
	--ion-background-color-step-800: #333333;
	--ion-background-color-step-850: #262626;
	--ion-background-color-step-900: #191919;
	--ion-background-color-step-950: #0d0d0d;
}

目錄

編輯此頁面