ブラウザのアドレスバーをブランドカラーに合わせたテーマに設定する のプログレッシブ ウェブアプリ（PWA）を使用すると、没入感の高いユーザー エクスペリエンスを実現できます。
ブラウザの互換性
2022 年 12 月より、ブラウザのアドレスバーのテーマ設定が Android ベースのブラウザ、Google Chrome、Microsoft Edge です。詳しくは、 ブラウザの互換性 をご覧ください。
Lighthouse テーマカラーの監査が失敗する仕組み
灯台 アドレスバーにテーマが適用されていないページにフラグを設定します。
Lighthouse で theme-color メタタグがページの
ウェブアプリ マニフェストの HTML と theme_color プロパティ。
なお、Lighthouse では、それらの値が有効な CSS の色値であるかどうかはテストされません。
アドレスバーのテーマの色を設定する方法
ステップ 1: ブランディングするすべてのページに theme-color メタタグを追加する
theme-color メタタグを使用すると、次の場合にアドレスバーをブランド化できます。
ユーザーが通常のウェブページとしてサイトにアクセスします。
タグの content 属性に、有効な CSS の色値を設定します。
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="theme-color" content="#317EFB"/>
…
</head>
…
Google の theme-color メタタグの詳細
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)