theme-color: тонирование интерфейса браузера вокруг страницы
theme-color — это мета-тег, который говорит браузеру, каким цветом красить собственный интерфейс вокруг вашей страницы: область адресной строки в Chrome на Android, оконный интерфейс установленного PWA и верх окна в свежих версиях Safari. Задаётся мета-тегом с именем theme-color и значением цвета, и можно объявить два таких тега с атрибутом media, чтобы он отслеживал светлую и тёмную тему. Веб-манифест приложения несёт то же значение в поле theme_color для установленного приложения.
Что он меняет
theme-color не влияет ни на что внутри вашей страницы. Он влияет на собственную поверхность браузера вокруг неё, так что граница между приложением и браузером перестаёт быть видимым швом. На телефоне тёмный сайт под белой адресной строкой читается как две отдельные вещи; их совпадение читается как одно целое.
Это подсказка, а не гарантия. Браузеры применяют её там, где у них есть поверхность для тонирования, и игнорируют в остальных местах, а некоторые откажутся от значений со слишком малым контрастом относительно собственного текста. Ничего не ломается, когда её игнорируют.
Варианты для светлой и тёмной темы
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0b0b0b" media="(prefers-color-scheme: dark)">Браузер выбирает первый тег, чей медиазапрос совпадает. Один тег без атрибута media применяется в любой теме.
Где он применяется
| Поверхность | Эффект |
|---|---|
| Chrome на Android | Тонирует адресную строку и область строки состояния |
| Установленный PWA | Тонирует заголовок или строку состояния приложения |
| Safari (свежие версии) | Тонирует верх окна на macOS и iOS |
| Вкладки десктопного Chrome | Никакого эффекта в обычном окне браузера |
Частые вопросы о theme-color
Связан ли theme-color с favicon?
Только в том, что они поставляются вместе и должны согласовываться. Favicon обозначает сайт на вкладке; theme-color тонирует интерфейс браузера вокруг страницы. Генераторы выдают оба, потому что они происходят из одной фирменной палитры.
Какие форматы значения цвета допустимы?
Любой CSS-цвет, который браузер может разобрать: hex, rgb(), hsl(), именованный цвет. Hex — самый безопасный выбор, потому что он однозначен для всех парсеров.
Почему мой theme-color игнорируется?
Частые причины — атрибут media, который никогда не совпадает с текущей темой, тег, вставленный после первой отрисовки, или десктопный браузер, у которого просто нет поверхности для тонирования. Проверьте сначала в Chrome для Android, где эффект наиболее заметен.