HTMLMetaElement: media-Eigenschaft

Die HTMLMetaElement.media-Eigenschaft ermöglicht das Festlegen der Medien für theme-color Metadaten.

Die theme-color-Eigenschaft ermöglicht es, die Farbe der Browser-Toolbar oder der Benutzeroberfläche in Browsern und Betriebssystemen zu setzen, die diese Eigenschaft unterstützen. Die media-Eigenschaft ermöglicht es, unterschiedliche Themenfarben für verschiedene media-Werte festzulegen.

Wert

Ein String.

Beispiele

Die Themenfarbe für den Dunkelmodus festlegen

Das folgende Beispiel erstellt ein neues <meta>-Element mit einem name-Attribut, das auf theme-color gesetzt ist. Das content-Attribut wird auf #3c790a gesetzt, das media-Attribut wird auf prefers-color-scheme: dark gesetzt, und das Element wird dem Dokument <head> hinzugefügt. Wenn ein Benutzer in seinem Betriebssystem einen Dunkelmodus angegeben hat, kann die media-Eigenschaft verwendet werden, um eine andere theme-color zu setzen:

js
const meta = document.createElement("meta");
meta.name = "theme-color";
meta.content = "#3c790a";
meta.media = "(prefers-color-scheme: dark)";
document.head.appendChild(meta);

Themenfarben nach Gerätegröße festlegen

Die meisten Meta-Eigenschaften können nur einmal verwendet werden. theme-color kann jedoch mehrfach verwendet werden, wenn eindeutige media-Werte angegeben werden.

Dieses Beispiel fügt zwei Meta-Elemente mit einer theme-color hinzu; eines für alle Geräte und ein weiteres für kleine Bildschirme. Die Reihenfolge, in der die media-Abfrage übereinstimmt, ist von Bedeutung, sodass die spezifischere Abfrage später im Dokument hinzugefügt werden sollte, wie unten gezeigt:

js
// Add a theme-color for all devices
const meta1 = document.createElement("meta");
meta1.name = "theme-color";
meta1.content = "#ffffff";
document.head.appendChild(meta1);

// Add a theme-color for small devices
const meta2 = document.createElement("meta");
meta2.name = "theme-color";
meta2.media = "(max-width: 600px)";
meta2.content = "#000000";
document.head.appendChild(meta2);

Spezifikationen

Specification
HTML
# dom-meta-media

Browser-Kompatibilität

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

Siehe auch