`<meta name="theme-color">` значение атрибута HTML

Ограниченная доступность

Эта функция не входит в Baseline, поскольку не работает в некоторых наиболее широко используемых браузерах.

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

Например, чтобы указать, что в документе следует использовать cornflowerblue в качестве цвета темы, задайте <meta> следующим образом:

<meta name="theme-color" content="cornflowerblue" />

Чтобы задать медиасреду, к которой применяется метаданный цвет темы, включите атрибут media с допустимым списком медиазапросов (см. пример медиазапроса theme-color).

Примечания по использованию

Элемент <meta name="theme-color"> имеет следующие дополнительные атрибуты:

content

Элемент <meta> с name=theme-color должен иметь атрибут content, задающий цвет темы. Значение атрибута content может быть следующим:

значение <color>: Допустимое значение цвета, например в шестнадцатеричном формате, RGB, именованный цвет и т. д.

media Необязательно

Любой допустимый тип медиаданных или медиазапрос. Если значение задано, параметры цвета темы документа, определённые в атрибуте content, предлагаются браузеру, когда медиазапрос соответствует условию.

Примеры

Задание значения цвета

Рассмотрим следующий код, в котором <meta> используется для задания цвета темы:

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

На следующем изображении показан эффект этой настройки в Chrome на мобильном устройстве Android:

Image showing the effect of using theme-color

Источник изображения: «Значки и цвета браузера», создано и опубликовано Google; используется на условиях, описанных в лицензии Creative Commons «С указанием авторства 4.0».

Использование медиазапроса с `theme-color`

В атрибуте media можно указать тип медиаданных или медиазапрос. В этом случае theme-color будет задано, только если условие медиазапроса выполняется. Например:

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

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

Спецификация
HTML> # meta-theme-color>

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

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`theme-color`	73 Chrome использует этот цвет только в установленных прогрессивных веб-приложениях. 39–73 Chrome сообщает о поддержке, но фактически нигде не использует этот цвет.	79 Edge использует этот цвет только в установленных прогрессивных веб-приложениях.	Нет	Нет	15 Начиная с Safari 26 цвет темы используется только в установленных веб-приложениях.	92 39–92 Chrome для Android не использует этот цвет на устройствах с включённым системным тёмным режимом, если только это не установленное прогрессивное веб-приложение или доверенное веб-приложение.	Нет	Нет	15 Начиная с Safari на iOS 26 цвет темы используется только в установленных веб-приложениях.	6.2	Нет	15 Начиная с WebView на iOS 26 цвет темы используется только в установленных веб-приложениях.

См. также

<meta> атрибут name color-scheme
свойство CSS color-scheme
медиазапрос prefers-color-scheme

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/theme-color

<meta name="theme-color"> значение атрибута HTML