theme-color

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Значениеtheme-color атрибутаname элемента<meta> указывает на рекомендуемый цвет, который пользовательские агенты должны использовать для настройки отображения страницы или окружающего пользовательского интерфейса. Атрибутcontent, если указан, должен содержать допустимое значение CSS<color>.

Примеры

html

<meta name="theme-color" content="#4285f4" />

Следующее изображение показывает эффект применения элемента<meta> из примера выше на страницу, отображаемую в Chrome на мобильном устройстве Android.

Изображение, показывающее эффект использования theme-color

Источник изображения:Icons & Browser Colors, создано и предоставлено Google, используется в соответствии с условиями, описанными влицензии Creative Commons 4.0 Attribution License.

Можно указать тип медиа или медиа-запрос в атрибутеmedia, тогда цвет будет установлен только в том случае, если условие выполнено. Например:

html

<meta name="theme-color" media="(prefers-color-scheme: light)" content="cyan" /><meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />