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
# dom-meta-media

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
media

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報