Adres çubuğu için tema rengi ayarlamıyor

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:

Adres çubuğunun sayfa renklerinin teması olmadığını gösteren Lighthouse denetimi

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)