Tarayıcının adres çubuğunu, Progresif Web Uygulamanızın (PWA) marka renklerine uyacak şekilde temaya uygun hale getirmek daha etkileyici bir kullanıcı deneyimi sağlar.
Tarayıcı uyumluluğu
Aralık 2022'den itibaren, tarayıcı adres çubuğuna tema ekleme özelliği Android tabanlı tarayıcılarda, Google Chrome ve Microsoft Edge'de desteklenmektedir. Güncellemeler için Tarayıcı uyumluluğu bölümüne bakın.
Lighthouse tema renk denetiminin başarısız olma nedeni
Lighthouse, adres çubuğuna tema uygulanmayan sayfaları işaretler:
Lighthouse, sayfanın HTML'sinde bir theme-color
meta etiketi ve web uygulaması manifest'inde bir theme_color
özelliği bulamazsa denetim başarısız olur.
Lighthouse'un, değerlerin geçerli CSS renk değerleri olup olmadığını test etmediğini unutmayın.
Adres çubuğu için tema rengi ayarlama
1. Adım: Marka eklemek istediğiniz her sayfaya bir theme-color
meta etiketi ekleyin
theme-color
meta etiketi, kullanıcılar sitenizi normal bir web sayfası gibi ziyaret ettiğinde adres çubuğunun markalı olmasını sağlar.
Etiketin content
özelliğini geçerli herhangi bir CSS renk değerine ayarlayın:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="theme-color" content="#317EFB"/>
…
</head>
…
Google'ın Android için Chrome 39'da theme-color
Desteği bölümünden theme-color
meta etiketi hakkında daha fazla bilgi edinebilirsiniz.
2. Adım: theme_color
mülkünü web uygulaması manifest dosyanıza ekleyin
Web uygulaması manifestinizdeki theme_color
özelliği, kullanıcı PWA'nızı ana ekrandan başlattığında adres çubuğunun markalı olmasını sağlar.
theme-color
meta etiketinin aksine, bunu manifest'te yalnızca bir kez tanımlamanız gerekir.
Özelliği geçerli herhangi bir CSS renk değerine ayarlayın:
{
"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)