テーマのカスタマイズ

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

アプリケーションの配色

アプリケーションの配色は、Ionic の複数の場所で使用されています。ダークテーマや、ブランディングにあったテーマを簡単に作成することができます。

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

Name	Description
--ion-background-color	Background color of the entire app
--ion-background-color-rgb	Background color of the entire app, rgb format
--ion-text-color	Text color of the entire app
--ion-text-color-rgb	Text color of the entire app, rgb format
--ion-backdrop-color	Color of the Backdrop component
--ion-backdrop-opacity	Opacity of the Backdrop component
--ion-overlay-background-color	Background color of the overlays
--ion-border-color	Border color
--ion-box-shadow-color	Box shadow color
--ion-tab-bar-background	Background of the Tab Bar
--ion-tab-bar-background-focused	Background of the focused Tab Bar
--ion-tab-bar-border-color	Border color of the Tab Bar
--ion-tab-bar-color	Color of the Tab Bar
--ion-tab-bar-color-selected	Color of the selected Tab Button
--ion-toolbar-background	Background of the Toolbar
--ion-toolbar-border-color	Border color of the Toolbar
--ion-toolbar-color	Color of the components in the Toolbar
--ion-toolbar-segment-color	Color of the Segment Buttons in the Toolbar
--ion-toolbar-segment-color-checked	Color of the checked Segment Buttons in the Toolbar
--ion-toolbar-segment-background	Background of the Segment Buttons in the Toolbar
--ion-toolbar-segment-background-checked	Background of the Segment Buttons in the Toolbar
--ion-toolbar-segment-indicator-color	Color of the Segment Button indicator in the Toolbar
--ion-item-background	Background of the Item
--ion-item-border-color	Border color of the Item
--ion-item-color	Color of the components in the Item
--ion-placeholder-color	Color of the placeholder in Inputs

ステップカラー

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

背景色 (--ion-background-color) と テキストカラー (--ion-text-color) の変数を更新すると、ほとんどのアプリコンポーネントの外観が変わりますが、見逃したり壊れたりする可能性のある特定の Ionic コンポーネントがあります。ダークテーマを適用するとき、これはより明白になります。

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

デフォルトでは、Ionic のステップカラーはデフォルトの背景色の値 #ffffff で始まります。 そしてテキストカラー値 #000000 を混ぜるために使います。ステップカラーの完全なリストは、以下のジェネレータに表示されています。

Stepped Color Generator

Create a custom background and text color theme for your app. Update the background or text color’s hex values below, then copy and paste the generated code directly into your Ionic project.

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