Skip to main content
Version: v7

テーマのカスタマイズ

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 つの背景色またはテキスト色しか使用できないことがわかりました。デザイン全体を通して重要性と深度を暗示するためには、背景色とテキスト色の色合いを変える必要があります。このパターンに対応するために、ステップカラーを作成しました。

背景色 (--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;
}

Contents

Edit this page