テーマの基本

Ionic Framework は、さまざまなプラットフォームの標準デザインに準拠しながら、白紙の状態からブランディングに合わせて簡単にカスタマイズおよび変更できるように構築されています。Ionic アプリの Theming は今まで以上に簡単です。フレームワークは CSS で構築されているため、事前に用意されているデフォルトスタイルは簡単に変更や修正をすることができます。

配色

Ionic には 9 つのデフォルトカラーがあり、多くのコンポーネントの色を変更するのに利用できます。各色は実際には shade や tint などの複数のプロパティの集まりで、Ionic 全体で使用されます。

色を変える際は、関連するすべてのプロパティを設定することが重要です。これはColor Generatorツールで簡単に行えますが、必要に応じて手動で書き込むことも可能です。イオニア色の詳細については、Colorsを参照してください。

プラットフォーム標準

Ionic コンポーネントは、アプリが動作しているプラットフォームに応じて、見た目や動作を調整します。私たちはこれを Adaptive Styling と呼んでいます。これにより、開発者は複数のプラットフォームで同じコードベースを使用しながら、特定のプラットフォームで「ネイティブ」な外観のアプリを構築することができます。

Ionic には 2 つのモードがあり、プラットフォームに基づいて部品の外観をカスタマイズするために使われています:iosとmd。各プラットフォームにはデフォルトモードがありますが、簡単に設定できます。プラットフォームに基づくアプリケーションのカスタマイズについての詳細は、Platform Stylesを参照してください。

CSS Variables

Ionic Framework のコンポーネントは、 CSS custom properties (variables) を使ってテーマ化されています。CSS 変数は、静的な言語に動的な値を追加します。これは従来、Sass のような CSS プリプロセッサを必要とするものでした。Ionic Framework が提供する CSS 変数 の値を変更することで、アプリケーションの外観を簡単に変更できます。

CSS Shadow Parts

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

Branding

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