Мета-тег theme-color: разбираемся, как он работает
Одна строка HTML, которая подкрашивает адресную строку в мобильном Chrome и заголовок окна в установленных приложениях. Вот как использовать её правильно.
Что именно он окрашивает
Мета-тег theme-color сообщает браузеру, каким цветом окрасить интерфейс, который находится рядом с вашей страницей. В мобильном Chrome и некоторых браузерах Android это адресная строка и строка состояния. В установленном PWA это заголовок окна и области вокруг него. В десктопных браузерах он обычно ничего не делает, поэтому относитесь к нему как к возможности для мобильных устройств и установленных приложений.
Значение — это один CSS-цвет. Значение в hex — безопасный выбор. Выберите то, что передаёт вашу марку и при этом оставляет белый или светлый текст читаемым, потому что браузер рисует собственные значки и текст поверх вашего цвета.
Отдельные цвета для светлого и тёмного режимов
<meta
name="theme-color"
content="#ffffff"
media="(prefers-color-scheme: light)"
>
<meta
name="theme-color"
content="#0b0b0f"
media="(prefers-color-scheme: dark)"
>Два тега, каждый ограничен своим media-запросом. Браузер выбирает тот, что соответствует текущему режиму пользователя. Уберите атрибут media, если вам нужен только один цвет для обоих режимов.
Держите значение в синхроне с manifest
У web app manifest есть собственное поле theme_color. Это значение — эквивалент мета-тега для установленных приложений: оно задаёт цвет, используемый, когда ваш сайт открывается с домашнего экрана. Мета-тег покрывает вкладку браузера; manifest покрывает окно установленного приложения.
Задайте оба и установите им один и тот же цвет, если только у вас нет реальной причины поступить иначе. Расхождение означает, что ваша адресная строка одного цвета в браузере, а заголовок окна — другого после установки, и это выглядит как баг. Смотрите, что такое manifest.json, и руководство по web app manifest для полного списка полей.
Частые вопросы
Меняет ли theme-color мой favicon?
Нет. theme-color только подкрашивает интерфейс браузера вокруг вашей страницы. Он никак не влияет на favicon на вкладке, на apple-touch-icon или на любой значок из manifest. Это отдельные файлы изображений.
Почему мой theme-color не работает на десктопе?
Большинство десктопных браузеров игнорируют theme-color. Он рассчитан на мобильный Chrome, некоторые браузеры Android и окна установленных PWA. Тестируйте его на телефоне или после установки приложения, а не в десктопной вкладке.
Должен ли theme-color совпадать с theme_color из manifest?
Да, почти во всех случаях. Мета-тег окрашивает вкладку браузера, а theme_color из manifest окрашивает окно установленного приложения. Разные значения приводят к тому, что цвет резко меняется, когда пользователь устанавливает ваш сайт.