<meta name="theme-color">
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
theme-color は <meta> 要素の name 属性の値で、ユーザーエージェントがページやその周辺のユーザーインターフェイスの表示をカスタマイズするために使用すべき推奨色を示します。指定された場合、 content 属性には有効な CSS の <color> が含まれていなければなりません。
例えば、文書でテーマカラーとして cornflowerblue を使用することを示すには、<meta> を次のように設定します。
<meta name="theme-color" content="cornflowerblue" />
テーマカラーのメタデータが適用されるメディアを設定するには、有効なメディアクエリーリストを含む media 属性を記載します（theme-color メディアクエリーの例を参照してください）。
使用上のメモ
<meta name="theme-color"> 要素には、次の追加属性が存在します。
例
色値の設定
<meta> を使用してテーマの色を設定する次のコードを考えてみましょう。
<meta name="theme-color" content="#4285f4" />
次の画像は、上記の <meta> 要素が、 Android モバイル端末上で動作する Chrome で表示された文書に与える影響を示しています。
画像の出典: Icons & Browser Colors より、 Google が作成・共有し Creative Commons 4.0 Attribution License に記載された条件に従って使用されています。
メディアクエリーと theme-color の使用
media 属性で、メディア種別やクエリーを指定することができ、メディアの条件が真である場合にのみ、色が設定されます。例えば、以下のようになります。
<meta
name="theme-color"
content="cornflowerblue"
media="(prefers-color-scheme: light)" />
<meta
name="theme-color"
content="dimgray"
media="(prefers-color-scheme: dark)" />
仕様書
| Specification |
|---|
| HTML # meta-theme-color |
ブラウザーの互換性
Loading…
関連情報
<meta>name属性のcolor-scheme値- CSS の
color-schemeプロパティ prefers-color-schemeメディアクエリー