メインコンテンツまでスキップ
Version: v6

テーマの基本

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

Colors

Ionic has nine default colors that can be used to change the color of many components. Each color is actually a collection of multiple properties, including a shade and tint, used throughout Ionic.

When changing a color, it is important to set all of the related properties. This can be done easily with the Color Generator tool, but these can also be manually written if desired. For more information on Ionic colors, see Colors.

    Platform Standards

    Ionic components adapt their look and behavior based on the platform the app is running on. We call this Adaptive Styling. This allows developers to build apps that use the same codebase for multiple platforms, while still looking "native" to those particular platforms.

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

    CSS Variables

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

    The Ionic Framework components are themed using CSS properties (variables). CSS variables add dynamic values to an otherwise static language. This is something that has traditionally required a CSS preprocessor like Sass. The look of an application can easily be changed by changing the value of any of the CSS Variables Ionic Framework provides.

    CSS Shadow Parts

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

    Branding

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