メインコンテンツまでスキップ
バージョン: v8

テーマのカスタマイズ

Ionic は、アプリケーション全体のデフォルトテーマを変更するために、コンポーネント全体で使用できるいくつかのグローバル変数を提供します。次のセクションでは、さまざまなテーマ変数を用途別に分類しています: Application Colors, Stepped Colors

アプリケーションの配色​

アプリケーションカラーは、Ionic の複数の場所で使用されています。これらは、ブランドにマッチしたダークパレットやテーマを簡単に作成するのに便利です。

背景とテキストの色変数は、RGB である必要があります: rgb format. なぜ rgb プロパティも必要であるかは The Alpha Problem をご覧ください。

NameDescription
--ion-background-colorBackground color of the entire app
--ion-background-color-rgbBackground color of the entire app, rgb format
--ion-text-colorText color of the entire app
--ion-text-color-rgbText color of the entire app, rgb format
--ion-backdrop-colorColor of the Backdrop component
--ion-backdrop-opacityOpacity of the Backdrop component
--ion-overlay-background-colorBackground color of the overlays
--ion-border-colorBorder color
--ion-box-shadow-colorBox shadow color
--ion-tab-bar-backgroundBackground of the Tab Bar
--ion-tab-bar-background-focusedBackground of the focused Tab Bar
--ion-tab-bar-border-colorBorder color of the Tab Bar
--ion-tab-bar-colorColor of the Tab Bar
--ion-tab-bar-color-selectedColor of the selected Tab Button
--ion-toolbar-backgroundBackground of the Toolbar
--ion-toolbar-border-colorBorder color of the Toolbar
--ion-toolbar-colorColor of the components in the Toolbar
--ion-toolbar-segment-colorColor of the Segment Buttons in the Toolbar
--ion-toolbar-segment-color-checkedColor of the checked Segment Buttons in the Toolbar
--ion-toolbar-segment-backgroundBackground of the Segment Buttons in the Toolbar
--ion-toolbar-segment-background-checkedBackground of the Segment Buttons in the Toolbar
--ion-toolbar-segment-indicator-colorColor of the Segment Button indicator in the Toolbar
--ion-item-backgroundBackground of the Item
--ion-item-border-colorBorder color of the Item
--ion-item-colorColor of the components in the Item
--ion-placeholder-colorColor of the placeholder in Inputs

ステップカラー​

Ionic テーマをカスタマイズするためのさまざまな方法を検討した結果、1 つの背景色またはテキスト色しか使用できないことがわかりました。デザイン全体を通して重要性と深度を暗示するためには、背景色とテキスト色の色合いを変える必要があります。このパターンに対応するために、ステップカラーを作成しました。

background 変数（--ion-background-color）とtext変数（--ion-text-color）を更新すると、ほとんどのコンポーネントでアプリの見た目が変わりますが、特定の Ionic コンポーネントでは見た目が崩れたり、壊れたりすることがあります。これは、暗いパレットを適用するとより明らかになります。

一部のコンポーネントでは、背景よりも暗い、またはテキストよりも明るい色合いを使用しています。たとえば、item の見出しテキストは、私たちのデフォルトのテキストカラーよりも数段階明るい色である #404040 になります。一方、ローディングコンポーネントの背景は白よりも濃い色 #f2f2f2 になります。私達はこれらのわずかな変化を定義するために、ステップカラーを利用します。アプリケーションの背景色やテキストの色を更新するときは、ステップカラーを更新することが重要です。

Ionic では、テキストカラーと背景カラーを別々に更新できるように、別々のステップカラーを提供しています。これは、テキストと背景の両方のステップカラーを使用するコンポーネントに便利で、ハイコントラストパレットを効果的に実装できます。

デフォルトでは、Ionic の段階的なテキストカラーは、デフォルトのテキストカラー値#000000 から始まり、背景カラー値#ffffff と増加するパーセンテージで混合します。Ionic の背景の段階的な色は、デフォルトの背景色値 #ffffff から始まり、増加する割合でテキスト色値 #000000 と混ざります。ステップカラーの完全なリストは、以下のジェネレータに示されています。

Stepped Color Generator​

アプリのカスタム背景色とテキスト色のテーマを作成します。以下の背景色またはテキスト色の 16 進数値を更新し、生成されたコードを Ionic プロジェクトに直接コピー＆ペーストしてください。

Background

Text

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

Contents

このページを編集