Skip to main content
Version: v8

テーマのカスタマイズ

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

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

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

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

Name説明
--ion-background-colorアプリ全体の背景色
--ion-background-color-rgbアプリ全体の背景色、rgb 形式
--ion-text-colorアプリ全体のテキスト色
--ion-text-color-rgbアプリ全体のテキスト色、rgb 形式
--ion-backdrop-colorBackdrop コンポーネントの色
--ion-backdrop-opacityBackdrop コンポーネントの不透明度
--ion-overlay-background-colorオーバーレイの背景色
--ion-border-colorボーダーの色
--ion-box-shadow-colorボックスシャドウの色
--ion-tab-bar-backgroundTab Bar の背景
--ion-tab-bar-background-focusedフォーカスされた Tab Bar の背景
--ion-tab-bar-border-colorTab Bar のボーダー色
--ion-tab-bar-colorTab Bar の色
--ion-tab-bar-color-selected選択された Tab Button の色
--ion-toolbar-backgroundToolbar の背景
--ion-toolbar-border-colorToolbar のボーダー色
--ion-toolbar-colorToolbar 内のコンポーネントの色
--ion-toolbar-segment-colorToolbar 内の Segment Buttons の色
--ion-toolbar-segment-color-checkedToolbar 内のチェックされた Segment Buttons の色
--ion-toolbar-segment-backgroundToolbar 内の Segment Buttons の背景
--ion-toolbar-segment-background-checkedToolbar 内のチェックされた Segment Buttons の背景
--ion-toolbar-segment-indicator-colorToolbar 内の Segment Button インジケーターの色
--ion-item-backgroundItem の背景
--ion-item-border-colorItem のボーダー色
--ion-item-colorItem 内のコンポーネントの色
--ion-placeholder-colorInput 内のプレースホルダーの色

ステップカラー​

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

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

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

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

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

ステップカラージェネレータ​

アプリのカスタム背景色とテキスト色のテーマを作成します。以下の背景色またはテキスト色の 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

Edit this page