テーマ

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

まとめ

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

テーマの種類

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

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

システムテーマ

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

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

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

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

</ph>

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

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

</ph>

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

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

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

</ph>

</ph>

メーカーのテーマ

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

アプリのテーマ

ベースライン

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

カスタム（ブランド）

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

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

</ph>

</ph>

コンテンツ

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

</ph>

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

</ph>

Material

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

ブランド

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

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

テーマの属性

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

色

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

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

</ph>

タイプ

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

</ph>

シェイプ

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

</ph>

アイコン

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

</ph>

その他のテーマ属性

主なマテリアル テーマ設定システムは色、タイプ、シェイプによって構成されますが、 デザイン システムは、マテリアルが依存するコンセプトに限定されません。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 プラグインを使用すると、 マテリアル テーマのカスタマイズ。これを使ってテーマを作成すると、 ライトとダークのカラーパターンがすでに生成されているテーマ設定を使用して、 エクスポートしたテーマ ファイルを 指定することもできます。

</ph>