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:
![Adres çubuğunun sayfanın renklerine göre belirlenmediğini gösteren Lighthouse denetimi](https://developer.chrome.google.cn/static/docs/lighthouse/pwa/themed-omnibox/image/lighthouse-audit-showing-a2ac9a5b8e2a5.png?authuser=8&hl=tr)
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)