Limited support 一部のブラウザのみ対応。使用時はサポート状況を確認すること。

<meta name="theme-color">

theme-color は <meta> 要素の name 属性の値で、ユーザーエージェントがページやその周辺のユーザーインターフェイスの表示をカスタマイズするために使用すべき推奨色を示します。指定された場合、 content 属性には有効な CSS の <color> が含まれていなければなりません。

例えば、文書でテーマカラーとして cornflowerblue を使用することを示すには、<meta> を次のように設定します。

html

<meta name="theme-color" content="cornflowerblue" />

テーマカラーのメタデータが適用されるメディアを設定するには、有効なメディアクエリーリストを含む media 属性を記載します（theme-color メディアクエリーの例を参照してください）。

メタデータ・スクリプト

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
name (theme-color)
73
79
15
92
15
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 4件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • Chromeは、インストールされたプログレッシブWebアプリケーションにのみ色を使用します。
  • Chromeはサポートしていると報告しているが、実際にはその色はどこにも使われていない。
削除済み
  • このバージョンで機能が削除されました (73)
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • Edgeは、インストールされたプログレッシブWebアプリケーションでのみこの色を使用します。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (92)
実装メモ
  • Android版Chromeは、インストールされているプログレッシブWebアプリまたは信頼できるWebアクティビティでない限り、ネイティブのダークモードが有効になっているデバイスでは色を使用しません。

基本構文

HTML 
<meta name="theme-color" content="#3498db">
<meta name="theme-color"
  media="(prefers-color-scheme: dark)"
  content="#1a1a2e">

ライブデモ

Theme color examples

Show how different theme colors can influence browser UI chrome on supporting platforms.

プレビュー全画面表示

Where it appears

theme-color tints browser UI surfaces such as tab and address bar areas, not document content.

プレビュー全画面表示

Selection tips

Use theme colors that match the brand without reducing contrast in browser chrome.

プレビュー全画面表示

実務での使いどころ

  • <meta name="theme-color"> の活用

    theme-color は <meta> 要素の name 属性の値で、ユーザーエージェントがページやその周辺のユーザーインターフェイスの表示をカスタマイズするために使用すべき推奨色を示します。

注意点

  • 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク