本文へスキップ
バージョン: v8

テーマ

Ionic は、アプリケーション全体のデフォルトテーマを変更するためにコンポーネント全体で使用されるいくつかのグローバル変数を提供します。アプリケーションの色 は、ほとんどの Ionic コンポーネントの外観を変更するのに役立ち、段階的な色 は一部の Ionic コンポーネントのバリエーションとして使用されます。

アプリケーションの色​

アプリケーションの色は、Ionic の複数の場所で利用されます。これらは、ブランドに合わせたダークパレットやテーマを簡単に作成するのに役立ちます。

背景色とテキスト色の変数には、rgb 形式で rgb 変数を設定する必要があることに注意してください。rgb プロパティがなぜ必要なのかについては、アルファ問題を参照してください。

名前説明
--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-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と混合されます。段階的な色の完全なリストは、以下のジェネレーターに示されています。

段階的なカラージェネレーター​

アプリのカスタム背景色とテキストカラーテーマを作成します。以下の背景色またはテキスト色の16進数の値を更新し、生成されたコードを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;
}

目次

このページを編集する