theme-color
Значение theme-color для атрибута name элемента <meta> указывает на рекомендуемый цвет, который пользовательские агенты должны использовать для настройки отображения страницы или окружающего пользовательского интерфейса. Если указано, атрибут content должен содержать допустимое значение CSS <color>.
Пример
<meta name="theme-color" content="#4285f4" />
На следующем изображении показано, как элемент <meta> выше повлияет на документ, отображаемый в Chrome на мобильном устройстве Android.
Источник изображения: из Иконки и цвета браузера, созданный и опубликованный Google и используемый в соответствии с условиями, описанными в Лицензии Creative Commons 4.0 Attribution.
Вы можете указать тип или запрос медиа в атрибуте media; цвет будет установлен только в том случае, если условие медиа истинно. Например:
<meta name="theme-color" media="(prefers-color-scheme: light)" content="cyan" /> <meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
Спецификации
| Спецификация |
|---|
| Стандарт HTML # meta-theme-color |
Совместимость с браузерами
| Рабочий стол | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на IOS | Samsung Internet | WebView Android | |
theme-color |
73Chrome использует цвет только в установленных приложениях Progressive Web App.39–72Chrome сообщает о поддержке, но фактически не использует цвет. |
79Edge использует цвет только в установленных приложениях Progressive Web App. |
Нет | Нет | 15 | 80Chrome для Android не использует цвет на устройствах с включённым режимом темной темы. |
Нет | Нет | 15 | 6.2 | Нет |
См. также
-
color-schemeсвойство CSS -
prefers-color-schemeмедиа-запрос
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
