theme-color メタタグを徹底解説
モバイル版 Chrome のアドレスバーやインストール済みアプリのタイトルバーに色を付ける、たった 1 行の HTML です。上手に使う方法を紹介します。
実際に色が付く場所
theme-color メタタグは、ページの隣に配置される UI にどの色を使うかをブラウザに伝えます。モバイル版 Chrome や一部の Android ブラウザでは、それはアドレスバーとステータスバーです。インストール済み PWA では、タイトルバーとその周囲になります。デスクトップブラウザではたいてい何も起こらないため、モバイルとインストール済みアプリ向けの機能だと考えてください。
値は単一の CSS カラーです。16 進数の値を指定するのが安全な選択です。ブラウザは自前のアイコンや文字をあなたの色の上に描画するので、ブランドらしさが伝わりつつ、白や明るい文字が読める色を選びましょう。
ライトとダークで色を分ける
<meta
name="theme-color"
content="#ffffff"
media="(prefers-color-scheme: light)"
>
<meta
name="theme-color"
content="#0b0b0f"
media="(prefers-color-scheme: dark)"
>2 つのタグを、それぞれ media クエリで限定します。ブラウザはユーザーの現在のモードに合致するほうを選びます。両モードで 1 色だけにしたい場合は media 属性を外してください。
manifest と同期させる
web app manifest には独自の theme_color フィールドがあります。この値はメタタグのインストール済みアプリ版に相当し、ホーム画面からサイトを起動したときに使われる色を設定します。メタタグはブラウザのタブを、manifest はインストール済みアプリのウィンドウをカバーします。
特別な理由がない限り、両方を設定し、同じ色に揃えましょう。食い違いがあると、ブラウザ内ではアドレスバーが 1 つの色で、インストール後はタイトルバーが別の色になり、バグのように見えてしまいます。フィールドの全リストは manifest.json とは何か、および web app manifest ガイドを参照してください。
よくある質問
theme-color は favicon を変えますか？
いいえ。theme-color はページ周囲のブラウザ UI に色を付けるだけです。タブの favicon、apple-touch-icon、manifest のアイコンには一切影響しません。それらは別々の画像ファイルです。
なぜデスクトップで theme-color が効かないのですか？
ほとんどのデスクトップブラウザは theme-color を無視します。これはモバイル版 Chrome、一部の Android ブラウザ、そしてインストール済み PWA のウィンドウ向けに設計されています。デスクトップのタブではなく、スマートフォンやアプリをインストールした後で確認してください。
theme-color は manifest の theme_color と揃えるべきですか？
ほぼすべてのケースで、はい。メタタグはブラウザのタブに、manifest の theme_color はインストール済みアプリのウィンドウに色を付けます。値が異なると、ユーザーがサイトをインストールしたときに色が急に変わってしまいます。