HTMLMetaElement: media property - Web APIs

HTMLMetaElement: media property - Web APIs | MDN

The following example creates a new <meta> element with a name attribute set to theme-color. The content attribute is set to #3c790a, the media attribute is set to prefers-color-scheme: dark, and the element is appended to the document <head>. When a user has specified a dark mode in their operating system, the media property can be used to set a different theme-color:

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

Setting theme colors by device size

Most meta properties can be used only once. However, theme-color can be used multiple times if unique media values are provided.

This example adds two meta elements with a theme-color; one for all devices and another for small screens. The order of matching the media query matters, so the more specific query should be added later in the document, as shown below:

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

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