theme-color

Значение 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" />

Спецификации

Specification
HTML Standard
# meta-theme-color

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также