このページは Cloud Translation API によって翻訳されました。

テーマ

テーマとは、色、タイプ、シェイプなどのスタイルまたは属性のセットで、ユーザーのモバイルデバイスや大画面デバイスの外観に影響を与える可能性がある向上させることができます

まとめ

よりパーソナライズされた使いやすいエクスペリエンスを提供するには、アプリがは、ライト / ダーク、ダイナミックなどのテーマを含むシステム環境設定を採用し、対比します。
動的テーマが利用できない場合にフォールバックとして使用するカスタムテーマを作成します。
さまざまなテーマを使用する場合は、タイプの設定を検討してください。
読みやすくするために、テキストとサーフェスのコントラストを必ず確認してください。

テーマの種類

テーマはシステムベースまたはアプリベースです。システムテーマは、ユーザーアカウントやデバイス UI を作成し、デバイスの設定で対応するコントロールを提供します。テーマは、実装されているアプリにのみ影響します。

アプリを表示するには、どちらのタイプのテーマも実装する必要がありますが、アプリのテーマは適用されますデバイスの他の場所では送信できません。一部のルールをオーバーライドすることもアプリ内設定とシステムのテーマ設定。

システムテーマ

システムテーマは、個々のアプリを含む Android デバイス全体に適用されますユーザー設定に応じて異なります。システムテーマには、ライトモードとダークモード、メーカーのテーマが含まれます

ライトモードとダークモード

ライトモード（日中モード）は、画面上部と下部に表示される輝度とサーフェスを高い色調値で構築します。反対にダークモードでは UI を切り替えて輝度を下げます。サーフェスは暗めに作られています低色調値に変更できます。

ダークモードには複数のメリットがあります。日当たりが強い場所や暗い場所でも画面が読みやすくなります。明るさを下げて目の疲れを軽減し、できます。また、ユーザーからの要望が特に多いアプリの機能です。

**図 1:** ライトモードとダークモードの同じホーム画面とアイコン表示されます。

ライトモードとダークモードを実装する際は、次の点を考慮してください。

カラーパターンをカスタマイズして表現力を高めることができます。以下を使用している場合: マテリアルテーマビルダーを使ってパターンを作成すると、できます。マテリアルのカスタマイズとカラーシステムの詳細ブランディングテーマ
ユーザーはシステムレベルのディスプレイ設定でライトモードまたはダークモードを設定できます。 [常にオン]、[常にオフ]、[時間帯別に自動設定] から選択できます。おすすめの方法ユーザーの好みのシステム設定を反映させますが、アプリ内コントロールを作成して、ユーザーにきめ細かい変更を加えることができます。
WebView のウェブコンテンツでも、ライト、ダーク、デフォルトのスタイルを使用できます。読み取り WebView のダークモードのサポート状況をご確認ください。
ユーザーがダークモードを有効にしている場合、Android はダークモードを強制的に適用できます。また、自由に調整できます。
ユーザーが他のテーマや設定を有効にしていない場合は、「ロック」アプリをライトモードに切り替えます。ただしこの方法はおすすめしませんユーザーのアクセシビリティやパーソナライズのニーズに悪影響を及ぼす場合があるためです

で確認できます。 <ph type="x-smartling-placeholder">

ユーザーが作成したテーマ

ユーザーが作成したテーマは、ダイナミックカラーでサポートされています。 Android 12 以降、Material You で利用可能になります。有効にすると、動的 color: ユーザーの壁紙からカスタムカラーを導き出し、アプリに適用するシステム UI です。このカラーパレットはライトとダークのカラーパターン

ユーザーのニーズに合わせて、デバイスの設定内でフォント設定を更新することもできます。設定とユーザー補助のニーズ。これらの設定は、をアプリに反映させることができるので、フォントには拡張可能なピクセル値を利用します。

メーカーのテーマ

デバイスメーカーは、独自のテーマ設定機能を追加で提供する場合があります。システム UI やディスプレイの設定に影響する可能性がある問題です。

アプリのテーマ

ベースライン

マテリアルライブラリのマテリアルコンポーネントは、以下のようなベースラインテーマを提供します。紫のカラーパターンと Roboto フォントを使用していますテーマを定義していないアプリこれらのベースライン属性に戻ります。

カスタム（ブランド）

カスタムテーマを使用すると、アプリの見た目をより幅広く表現できます特定のシステムテーマが利用できない場合にフォールバックとして機能します。これは、完全なカスタムデザインシステム、小規模なアプリケーションブランドガイド、お気に入りの色などでかまいません。

アプリには複数のカスタムスキームを作成することもできます。フルスキームをユーザーが指定できるようにするなど、サブブランド要素を使ってコンテンツを選択します

**図 5:** ベースラインテーマが適用された、同じアプリとそのコンテンツ（左）と適用されたカスタムテーマ（右）

**図 6:** ベースラインで生成されたテーマ（左）とテーマが適用されたボタンカスタム値で構成されている（右）

コンテンツ

一部のコンテンツにさらにフォーカスを合わせるために、UI でダイナミックカラーを使用して色を継承できるそのコンテンツから抽出できますコンテンツの色は、メインのコンテンツソースが 1 つであれば効果的ですが、複数のコンテンツソースを含む視聴では慎重に使用してください。

**図 7:** 主要なアートからコンテンツを取得するアプリ。メディア通知では、メディアのアートワークから色を抽出することもできます

一般的に、テーマはアプリ全体に影響しますが、選択的に適用することもできます他のテーマと重ねて説明しますテーマと組み合わせを多用しすぎないようにする階層: 動的またはカスタムのいずれかを含む、メインのテーマのソース UI の大部分に適用されます。

**図 8:** アプリは複数のテーマ設定を組み合わせて使用でき、特定の要素に色やブランドカラーを付加

Material

マテリアルデザインでは、ベースラインテーマとテーマ設定システム（色、タイプ、 Shape）。マテリアルテーマ設定を拡張して、属性をテーマに追加します。

ブランド

マテリアルデザインのテーマシステムが希望するデザインと一致しない場合完全なカスタムテーマを実装できます。必ずカスタムルールをコントラストと読みやすさを向上します。

Compose でカスタムシステムを実装する方法をご覧ください。

テーマの属性

テーマの属性を UI デザインの一般的なビジュアルスタイルに合わせて調整し、さまざまな美的要素を取り入れます。多くの場合、アプリ内でこれらのプロパティはマテリアルに関連付けられるテーマ設定システムを追加し、アプリメーカーのカスタマイズを可能にします。

色

色を使ってスタイルを表現し、意味を伝えます。アプリの色を設定するパーソナライズやセマンティック目的の定義に極めて重要になりますブランドアイデンティティの定義

テーマにおけるカラーパターンは、特定のロールに割り当てられたトーンのグループですコンポーネントにマッピングされています。Android の色について詳細 UI とマテリアル 3 カラーシステムです。

タイプ

Android のシステムフォントは Roboto（すべてのアプリで自由に利用できます）ですが、タイプをカスタマイズできます。選択したフォントの読みやすさを考慮してできます。適用タイプを確認する。

シェイプ

ベースラインのデフォルト値を超えてコンテナの角の形状をカスタマイズすると、定義できます。たとえば、完全な角丸を使用して、柔らかく楽しい感触にするか、アンギュラーなカットを使えば、シリアスな印象を与えることができます。マテリアルコンポーネントのシェイプトークンとスタイルを確認します。

アイコン

アプリ内で使用できるマテリアルアイコンには、塗りつぶし、枠線あり、シャープ、丸み、ツートーン。キャンペーン全体で同じアイコンスタイルを統一感のある洗練された外観を維持できます。

</ph>

図 12: マテリアルアイコンのスタイル

その他のテーマ属性

主なマテリアルテーマ設定システムは色、タイプ、シェイプによって構成されますが、デザインシステムは、マテリアルが依存するコンセプトに限定されません。Google Chat では既存のシステムを変更して、まったく新しいシステムを導入他のコンセプトをテーマに適合させることができます。必要に応じて既存のシステムを拡張または置き換えて、カスタム属性を提供されます。たとえば、グラデーションのシステムや間隔を追加する必要があるとします。定義できます。

アプリにテーマを適用する

テーマとスタイルおよびクラスの比較

テーマとスタイルの両方に複数のデザイン属性を設定できます。スタイルは独立した要素であり、個々の要素（または View など）では、1 つのテーマを複数の要素に対して、さらには全体に対して設定できます。。スタイルは、再利用可能なスタイルの選択であり、使用できます。たとえば、Body Large はスタイルで、Light と Dark はテーマです。

Compose でテーマを実装する

テーマは通常複数のシステムで構成されており、テーマ設定値を持つクラスを使用してモデル化します。

Jetpack の使用について詳しくは、Compose のマテリアルデザイン 3 をご覧ください。 Compose を使用して、マテリアルデザイン 3 テーマの実装を作成します。

Color.kt
val md_theme_light_primary = Color(0xFF476810)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFC7F089)
val md_theme_dark_primary = Color(0xFFACD370)
val md_theme_dark_onPrimary = Color(0xFF213600)
val md_theme_dark_primaryContainer = Color(0xFF324F00)

ビューでテーマを実装する

テーマとは、モデルによって定義された意味的に名前が付けられたリソースのコレクションで、最適化されていますテーマは同じスタイル構文を共有します。

ビューを使ってみる

Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>

WebView

WebView のウェブコンテンツでは、ライト、ダーク、デフォルトのスタイルを使用することもできます。詳細 WebView のダークモードがサポートされています。

マテリアルテーマをカスタマイズする

マテリアルテーマビルダーの Figma プラグインを使用すると、マテリアルテーマのカスタマイズ。これを使ってテーマを作成すると、ライトとダークのカラーパターンがすでに生成されているテーマ設定を使用して、エクスポートしたテーマファイルを指定することもできます。