dopasowywanie motywu adresu URL przeglądarki do kolorów marki. progresywnej aplikacji internetowej (PWA) zapewniają użytkownikom lepsze wrażenia.
Zgodność z przeglądarką
Od grudnia 2022 roku dodawanie tematów na pasku adresu przeglądarki jest obsługiwane na urządzeniach Przeglądarki na Androida, Google Chrome i Microsoft Edge. Zobacz Zgodność z przeglądarką .
Niepowodzenie kontroli kolorów motywu Lighthouse
Lighthouse oznacza strony, które nie mają przypisanego motywu do paska adresu:
Kontrola nie powiedzie się, jeśli Lighthouse nie znajdzie metatagu theme-color w kodzie strony
HTML i usługę 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, do której chcesz dodać markę
Metatag theme-color gwarantuje, że na pasku adresu pojawi się marka,
użytkownik odwiedza Twoją witrynę jako zwykłą stronę internetową.
Ustaw dowolną prawidłową wartość atrybutu content tagu CSS:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="theme-color" content="#317EFB"/>
…
</head>
…
Więcej informacji o metatagu theme-color znajdziesz w nagłówku strony Google
Obsługa funkcji theme-color w Chrome 39 na Androida.
Krok 2. Dodaj właściwość theme_color do pliku manifestu aplikacji internetowej
Właściwość theme_color w pliku manifestu aplikacji internetowej zapewnia, że adres
jest oznaczony marką, gdy użytkownik uruchamia Twoją aplikację PWA na ekranie głównym.
W przeciwieństwie do metatagu theme-color potrzebujesz tylko
, aby zdefiniować tę wartość raz w polu manifestu.
Ustaw tę właściwość na 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)