Не установлен цвет темы для адресной строки (Does not set a theme color for the address bar)
Published on • Updated on
Установив тему для адресной строки браузера согласно брендовым цветам своего современного веб-приложения (Progressive Web App, PWA), вы сделаете интерфейс более единообразным.
Совместимость с браузерами
На момент написания этой статьи темы для адресной строки браузера поддерживаются в браузерах на базе Android. В разделе совместимости можно отслеживать состояние поддержки в различных браузерах.
Аудит цвета темы в Lighthouse
Lighthouse помечает страницы, которые не применяют тему к адресной строке:
Аудит считается непройденным, если Lighthouse не находит метатег theme-color в HTML-коде страницы или свойство theme_color в манифесте веб-приложения.
При этом Lighthouse не проверяет, являются ли найденные значения допустимыми цветами CSS.
In the Lighthouse report UI the full PWA badge is given when you pass all of the audits in all of the PWA subcategories (Fast and reliable, Installable, and PWA optimized).
Как установить цвет темы для адресной строки
Шаг 1. Добавьте метатег theme-color на страницы, которые нужно оформить в стиле бренда
Метатег theme-color оформляет адресную строку в стиле бренда, когда пользователь заходит на сайт как на обычную веб-страницу. Установите для атрибута content тега любое допустимое значение цвета CSS:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="theme-color" content="#317EFB"/>
…
</head>
…Подробнее о метатеге theme-color — в статье Google о поддержке theme-color в Chrome 39 для Android.
Шаг 2. Добавьте свойство theme_color в манифест веб-приложения
Свойство theme_color в манифесте веб-приложения оформляет адресную строку в стиле бренда, когда пользователь запускает PWA с главного экрана. В отличие от метатега theme-color, это свойство нужно определить только один раз — в манифесте. Установите для свойства любое допустимое значение цвета CSS:
{
"theme_color": "#317EFB"
…
}Браузер установит цвет адресной строки для всех страниц приложения согласно theme_color в манифесте.
Материалы
Updated on • Improve article