Paul Kinlan
Chrome は、サイトのテーマカラーのコンセプトを 2014 年に導入しました。テーマカラーは、ウェブページがブラウザに、アドレスバーなどの UI 要素をどの色にするかを指定するためのヒントになります。
たとえば、以下はテーマカラーを適用した場合と適用しない場合のサイトです。
問題は、各ページのテーマカラーを定義する必要があることです。大規模なサイトやレガシー サイトでは、サイト全体にわたって多くの変更を加えることは必ずしも現実的ではありません。
Chrome 46（ベータ版、2015 年 9 月）以降、マニフェストに theme_color 属性を追加すると、サイトがホーム画面から起動されたときに、ユーザーがドメイン内のどのページにアクセスしても、そのページに自動的に色が適用されるようになります。
ページにすでにテーマカラーのメタタグ（<meta name="theme-color" content="#2196F3"> など）が設定されている場合は、マニフェストの値ではなく、ページレベルの構成が使用されます。
マニフェストに theme_color 属性を追加し、HTML の色を指定します。
"theme_color": "#2196F3"
実際の動作を確認するには、Airhorner - 世界一のクラクションにアクセスして、ホーム画面に追加します。または、サイトのマニフェストを確認します。
よくある質問
- サイトがホーム画面から起動されない場合は適用されますか？
はい。 - ユーザーがブラウジングしているときなど、サイト全体に適用されることがありますか？
現時点では、そうはならないでしょう。そうすると、ブラウザはマニフェストをより頻繁にダウンロードしなければならなくなり、現在は優先度が低いアセットです。これは、ユーザーがサイトをホーム画面に追加するときに解析することを目的としています。