テーマ

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 を混ぜるために使います。ステップカラーの完全なリストは、以下のジェネレータに表示されています。

ステップカラーの変数生成

アプリのカスタム背景色とテキストの色のテーマを作成します。下記の背景色またはテキストカラーの16進値を更新してから、生成されたコードをコピーしてIonicプロジェクトに直接貼り付けます。