アドレスバーのテーマカラーが設定されていない

ブラウザのアドレスバーのテーマをプログレッシブ ウェブアプリ（PWA）のブランドカラーに合わせると、より没入感のあるユーザー エクスペリエンスを実現できます。

ブラウザの互換性

2022 年 12 月現在、ブラウザのアドレスバーのテーマ設定は、Android ベースのブラウザ、Google Chrome、Microsoft Edge でサポートされています。更新については、ブラウザの互換性をご覧ください。

Lighthouse テーマの色の監査が失敗する仕組み

Lighthouse では、アドレスバーにテーマが適用されないページにフラグが付けられます。

Lighthouse の監査で、アドレスバーがページの色にテーマが設定されていないことが示される

Lighthouse で、ページの HTML に theme-color メタタグと、ウェブアプリ マニフェストの theme_color プロパティが見つからない場合、監査は不合格となります。

なお、Lighthouse では、CSS の色の値が有効かどうかはテストされません。

アドレスバーのテーマカラーを設定する方法

ステップ 1: ブランディングするすべてのページに theme-color メタタグを追加する

theme-color メタタグを使用すると、ユーザーが通常のウェブページとしてサイトにアクセスしたときに、アドレスバーがブランド名で表示されるようになります。タグの content 属性を有効な CSS の色値に設定します。

<!DOCTYPE html>
<html lang="en">
<head>
  …
  <meta name="theme-color" content="#317EFB"/>
  …
</head>
…

theme-color メタタグについて詳しくは、Google の Android 向け Chrome 39 での theme-color のサポートをご覧ください。

ステップ 2: ウェブアプリ マニフェストに theme_color プロパティを追加する

ウェブアプリ マニフェストの theme_color プロパティを使用すると、ユーザーがホーム画面から PWA を起動したときにアドレスバーにブランドが表示されます。theme-color メタタグとは異なり、マニフェストで一度定義するだけで済みます。プロパティに有効な CSS カラー値を設定します。

{
  "theme_color": "#317EFB"
  …
}
 ```

The browser will set the address bar color of every page of your app
according to the manifest's `theme_color`.

## Resources

- [Source code for **Does not set a theme color for the address bar** audit](https://github.com/GoogleChrome/lighthouse/blob/main/core/audits/themed-omnibox.js)
- [Add a web app manifest](https://web.dev/articles/add-manifest)
- [Support for `theme-color` in Chrome 39 for Android](/blog/support-for-theme-color-in-chrome-39-for-android)