テーマの基本

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

配色

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

色を変更する際には、関連するすべてのプロパティを設定することが重要です。これはColor Generatorツールで簡単に行えますが、必要であればこれらは手動で記述することもできます。Ionic の色については、Colorsを参照してください。

Platform Standards

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

Ionic は、2 つの modes をもっており、これらはプラットフォーム: ios と md に基づいてコンポーネントの外観がカスタマイズされます。各プラットフォームにはデフォルトモードがありますが、簡単に変更できます。プラットフォームに基づいてアプリケーションをカスタマイズする方法の詳細については、Platform Styles をご覧ください。

CSS Variables

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

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

CSS Shadow Parts

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

Branding

Ionic は、ブランディングや配色にあったテーマとなるアプリケーションの配色を提供します。デフォルトのテーマは明るい背景を使用しますが、背景色からテキストの色まですべてカスタマイズ可能です。ブランディングの詳細については、Themes をご覧ください。