テーマ設定の基本

Ionic Framework は、ブランドに合わせて簡単にカスタマイズおよび変更できる空白のキャンバスとして構築されており、それでもさまざまなプラットフォームの標準に従います。Ionic アプリのテーマ設定はこれまで以上に簡単になりました。このフレームワークは CSS で構築されているため、非常に簡単に変更および修正できる事前設定されたデフォルトスタイルが付属しています。

カラー

Ionic には、多くのコンポーネントの色を変更するために使用できる 9 つのデフォルトカラーがあります。各カラーは実際には、Ionic 全体に使用されるshade と tint を含む複数のプロパティのコレクションです。

色を変更する際には、関連するすべてのプロパティを設定することが重要です。これは、カラージェネレーターツールを使用すると簡単に実行できますが、必要に応じて手動で記述することもできます。Ionic のカラーの詳細については、カラーを参照してください。

プラットフォーム標準

Ionic コンポーネントは、アプリが実行されているプラットフォームに基づいて、外観と動作を調整します。これを適応型スタイルと呼びます。これにより、開発者は複数のプラットフォームで同じコードベースを使用するアプリを構築しながら、それらの特定のプラットフォームに「ネイティブ」に見えるようにすることができます。

Ionic には、プラットフォームに基づいてコンポーネントの外観をカスタマイズするために使用される 2 つのモードがあります：ios と md。各プラットフォームにはデフォルトモードがありますが、これは簡単に構成できます。プラットフォームに基づいてアプリケーションをカスタマイズする方法の詳細については、プラットフォームスタイルを参照してください。

CSS 変数

Ionic Framework コンポーネントは、CSS カスタムプロパティ（変数）を使用してテーマ設定されています。CSS 変数は、静的な言語に動的な値を追加します。これは、従来は Sass のような CSS プリプロセッサが必要でした。アプリケーションの外観は、Ionic Framework が提供するCSS 変数のいずれかの値を変更することで簡単に変更できます。

CSS シャドウパーツ

CSS シャドウパーツは、Ionic Framework シャドウコンポーネントを完全にカスタマイズできるようにするために追加されました。過去には、Shadow DOMを使用するコンポーネントは、シャドツリー内の要素を直接スタイル設定できませんでした。シャドウパーツの追加により、シャドウコンポーネントの内側の要素のすべてのプロパティに CSS 変数を使用する必要がなくなりました。パーツを使用して Ionic Framework コンポーネントをカスタマイズする方法の詳細については、CSS シャドウパーツガイドを参照してください。

ブランディング

Ionic は、ブランドまたは配色に合わせてアプリケーションのテーマ設定に使用できるアプリケーションカラーを提供します。デフォルトのテーマは明るい背景を使用しますが、背景色からテキストの色まで、すべてを完全にカスタマイズできます。ブランディングの詳細については、テーマを参照してください。