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 を設定することができます。

js

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 クエリーに一致させる順番が重要ですので、下記に示すように、より詳細なクエリーが文書内で後になるように追加してください。

js

// すべての端末向けの 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

関連情報