Jeśli dostosujesz pasek adresu przeglądarki do barw marki progresywnej aplikacji internetowej (PWA), zapewnisz użytkownikom bardziej atrakcyjne wrażenia.
Zgodność z przeglądarką
Od grudnia 2022 r. przypisywanie tematów do paska adresu przeglądarki jest obsługiwane w przeglądarkach na Androida, Google Chrome i Microsoft Edge. Informacje o aktualizacjach znajdziesz w artykule Zgodność przeglądarek.
Niepowodzenie kontroli kolorów motywu Lighthouse
Lighthouse oznacza strony, które nie dodają motywu do paska adresu:
Audyt nie powiedzie się, jeśli Lighthouse nie znajdzie metatagu theme-color w kodzie HTML strony ani właściwości theme_color w pliku manifestu aplikacji internetowej.
Pamiętaj, że Lighthouse nie sprawdza, czy wartości są prawidłowymi wartościami kolorów CSS.
Jak ustawić kolor motywu na pasku adresu
Krok 1. Dodaj metatag theme-color do każdej strony, którą chcesz oznaczyć marką
Gdy użytkownik odwiedzi Twoją witrynę jak zwykła strona internetowa, metatag theme-color gwarantuje, że na pasku adresu będzie znajdować się marka.
Ustaw atrybut content tagu na dowolną prawidłową wartość koloru CSS:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="theme-color" content="#317EFB"/>
…
</head>
…
Więcej informacji o metatagu theme-color znajdziesz w pomocy Google dotyczącej theme-color w Chrome 39 na Androida.
Krok 2. Dodaj usługę theme_color do pliku manifestu aplikacji internetowej
Właściwość theme_color w pliku manifestu aplikacji internetowej gwarantuje, że gdy użytkownik uruchomi Twoją aplikację PWA z ekranu głównego, pasek adresu będzie oznaczony marką.
W odróżnieniu od tagu theme-color wystarczy zdefiniować go tylko raz w pliku manifestu.
Ustaw we właściwości dowolną prawidłową wartość koloru CSS:
{
"theme_color": "#317EFB"
…
}
```
The browser will set the address bar color of every page of your app
according to the manifest's `theme_color`.
## Resources
- [Source code for **Does not set a theme color for the address bar** audit](https://github.com/GoogleChrome/lighthouse/blob/main/core/audits/themed-omnibox.js)
- [Add a web app manifest](https://web.dev/articles/add-manifest)
- [Support for `theme-color` in Chrome 39 for Android](/blog/support-for-theme-color-in-chrome-39-for-android)