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