theme-color：ページ周囲のブラウザ UI に色を付ける
theme-color は、ページ周囲の自身の UI（Android の Chrome のアドレスバー付近、インストール済み PWA のウィンドウクローム、最近の Safari のウィンドウ上部）を何色で塗るかをブラウザに伝えるメタタグです。name を theme-color としたメタタグと色の値で設定し、media 属性を付けて 2 つ宣言すればライトモードとダークモードに追従させられます。Web アプリマニフェストは、インストール済みアプリ向けに同じ値を theme_color フィールドで保持します。
何が変わるのか
theme-color はページの内側には何の影響も与えません。その周囲にあるブラウザ自身の面に作用し、アプリとブラウザの境目が目に見える継ぎ目でなくなります。スマートフォンでは、白いアドレスバーの下にある暗いサイトは二つの別物に見えますが、両者を合わせれば一つに見えます。
これはヒントであって保証ではありません。ブラウザは色を付けられる面があるところで適用し、それ以外では無視します。中には、自身のテキストとのコントラストが低すぎる値を拒むものもあります。無視されても何も壊れません。
ライトとダークのバリアント
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0b0b0b" media="(prefers-color-scheme: dark)">ブラウザは、media クエリが最初に一致したタグを選びます。media 属性の無いタグ 1 つは、あらゆるスキームで適用されます。
適用される場所
| 表示面 | 効果 |
|---|---|
| Android の Chrome | アドレスバーとステータスバー付近に色を付ける |
| インストール済み PWA | アプリのタイトルバーやステータスバーに色を付ける |
| Safari（最近のバージョン） | macOS と iOS でウィンドウ上部に色を付ける |
| デスクトップ Chrome のタブ | 通常のブラウザウィンドウには効果なし |
theme-color に関するよくある質問
theme-color はファビコンと関係がありますか？
一緒に出荷され、揃っているべきという点でだけ関係します。ファビコンはタブ内でサイトを識別し、theme-color はページ周囲のブラウザ UI に色を付けます。ジェネレーターが両方を書き出すのは、同じブランドパレットから来るからです。
色の値はどの形式が許されますか？
ブラウザが解析できる CSS の色すべて（16 進数、rgb()、hsl()、色名）です。パーサー間で曖昧さが無いため、16 進数が最も安全な選択です。
なぜ theme-color が無視されるのですか？
よくある原因は、現在のスキームに一致しない media 属性、初回描画の後に注入されたタグ、そして単に色を付ける面が無いデスクトップブラウザです。効果が最も見えやすいのは Android の Chrome なので、まずそこで確認してください。