HTMLMetaElement: media プロパティ
HTMLMetaElement.media
プロパティで、theme-color
メタデータのメディアを指定することができます。
theme-color
プロパティで、このプロパティに対応しているブラウザーやオペレーティングシステムにおいて、ブラウザーのツールバーや UI の色を設定することができます。
media
プロパティにより、異なる media
値に対して異なるテーマカラーを設定することができます。
値
文字列です。
例
テーマカラーをダークモードに設定
次の例では、新しい <meta>
要素を作成して name
属性を theme-color
に設定します。
content
属性には #3c790a
を設定し、media
属性には prefers-color-scheme: dark
と設定し、それからその要素を文書の <head>
に追加します。
ユーザーがオペレーティングシステムでダークモードを指定している場合、media
プロパティを使用して異なる theme-color
を設定することができます。
var meta = document.createElement("meta");
meta.name = "theme-color";
meta.content = "#3c790a";
meta.media = "(prefers-color-scheme: dark)";
document.head.appendChild(meta);
端末の大きさでテーマカラーを設定
ほとんどのメタプロパティは一度しか使用することができません。ただし theme-color
は、固有の media
値が提供されていれば、複数回使用することができます。
この例では、theme-color
を持つ 2 つの meta 要素を追加しています。1 つはすべての端末用、もう 1 つは小さな画面用です。
media
クエリーに一致させる順番が重要ですので、下記に示すように、より詳細なクエリーが文書内で後になるように追加してください。
// すべての端末向けの theme-color を追加
meta = document.createElement("meta");
meta.name = "theme-color";
meta.content = "#ffffff";
document.head.appendChild(meta);
// 小さな端末向けの theme-color を追加
var meta = document.createElement("meta");
meta.name = "theme-color";
meta.media = "(max-width: 600px)";
meta.content = "#000000";
document.head.appendChild(meta);
仕様書
Specification |
---|
HTML Standard # dom-meta-media |
ブラウザーの互換性
BCD tables only load in the browser