Baseline Widely available
The HTMLMetaElement.media property enables specifying the media for theme-color metadata.
The theme-color property enables setting the color of the browser's toolbar or UI in browsers and operating systems that support this property. The media property enables setting different theme colors for different media values.
A string.
Examples Setting the theme color for dark modeThe 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);
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);
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4