Tarayıcının adres çubuğunu temaya göre marka renklerine uygun hale getirme Progresif Web Uygulamanızın (PWA) kullanımı daha etkileyici bir kullanıcı deneyimi sunar.
Tarayıcı uyumluluğu
Aralık 2022 itibarıyla, tarayıcı adres çubuğunda tema ekleme özelliği şu cihazlarda desteklenmektedir: Android tabanlı tarayıcılar, Google Chrome ve Microsoft Edge. Görüntüleyin Tarayıcı uyumluluğu başlıklı makaleye göz atın.
Lighthouse teması renk denetimi nasıl başarısız olur?
Lighthouse adres çubuğuna tema uygulamayan sayfaları işaretler:
Lighthouse, sayfanın sayfasında bir theme-color meta etiketi bulamazsa denetim başarısız olur.
Web uygulaması manifest'inde HTML ve theme_color mülkü.
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: Markalamak istediğiniz her sayfaya bir theme-color meta etiketi ekleyin
theme-color meta etiketi,
Kullanıcı sitenizi normal bir web sayfası olarak ziyaret eder.
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 theme-color meta etiketi hakkında daha fazla bilgi
Android için Chrome 39 sürümünde theme-color desteği.
2. Adım: theme_color mülkünü web uygulaması manifestinize ekleyin
Web uygulaması manifestinizdeki theme_color özelliği, adresin
Çubuğu, kullanıcı PWA'nızı ana ekrandan başlattığında markalı olur.
theme-color meta etiketinden farklı olarak, yalnızca
(manifest) bunu bir kez tanımlamak için.
Ö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)