/Web APIs

HTMLMetaElement: media property

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.


Setting the theme color for dark mode

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:

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

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
meta = document.createElement("meta");
meta.name = "theme-color";
meta.content = "#ffffff";

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


Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
media 93 93 106 No 79 15 93 93 106 66 15 17.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.