HTMLMetaElement : propriété media

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis octobre 2022.

La propriété media de l'interface HTMLMetaElement permet de définir le média pour les métadonnées theme-color.

La propriété theme-color permet de définir la couleur de la barre d'outils ou de l'interface du navigateur dans les navigateurs et systèmes d'exploitation qui prennent en charge cette propriété. La propriété media permet de définir différentes couleurs de thème selon les valeurs de media.

Dans cet article

Valeur

Une chaîne de caractères.

Exemples

Définir la couleur de thème pour le mode sombre

L'exemple suivant crée un nouvel élément <meta> avec un attribut name défini sur theme-color. L'attribut content est défini sur #3c790a, l'attribut media est défini sur prefers-color-scheme: dark, et l'élément est ajouté à l'élément <head> du document. Quand un·e utilisateur·ice a défini un mode sombre dans son système d'exploitation, la propriété media peut être utilisée pour définir une couleur de thème différente :

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

Définir des couleurs de thème selon la taille de l'appareil

La plupart des propriétés meta ne peuvent être utilisées qu'une seule fois. Cependant, theme-color peut être utilisé plusieurs fois si des valeurs de media uniques sont fournies.

Cet exemple ajoute deux éléments meta avec un theme-color : un pour tous les appareils et un autre pour les petits écrans. L'ordre de correspondance de la requête media est important, donc la requête la plus spécifique doit être ajoutée plus tard dans le document, comme illustré ci-dessous :

js
// Ajouter un theme-color pour tous les appareils
const meta1 = document.createElement("meta");
meta1.name = "theme-color";
meta1.content = "white";
document.head.appendChild(meta1);

// Ajouter un theme-color pour les petits appareils
const meta2 = document.createElement("meta");
meta2.name = "theme-color";
meta2.media = "(width <= 600px)";
meta2.content = "black";
document.head.appendChild(meta2);