ब्रैंड के कलर से मैच करने के लिए, ब्राउज़र के पता बार के लिए थीम बनाना आपके प्रोग्रेसिव वेब ऐप्लिकेशन (पीडब्ल्यूए) का इस्तेमाल करके, ज़्यादा बेहतर उपयोगकर्ता अनुभव दिया जा सकता है.
ब्राउज़र के साथ काम करना
दिसंबर 2022 से, ब्राउज़र के पता बार की थीम बनाने की सुविधा इन पर काम करती है Android पर आधारित ब्राउज़र, Google Chrome, और Microsoft Edge. यहां जाएं: अलग-अलग ब्राउज़र के साथ काम करता है या नहीं अपडेट देखें.
लाइटहाउस थीम का रंग ऑडिट कैसे नहीं किया जा सकता
लाइटहाउस उन पेजों को फ़्लैग करता है जो पता बार पर थीम लागू नहीं करते:
अगर लाइटहाउस को पेज केtheme-color
वेब ऐप्लिकेशन मेनिफ़ेस्ट में एचटीएमएल और एक theme_color प्रॉपर्टी शामिल है.
ध्यान दें कि लाइटहाउस यह जांच नहीं करता कि ये वैल्यू, सीएसएस की मान्य कलर वैल्यू हैं या नहीं.
पता बार के लिए थीम का रंग सेट करने का तरीका
पहला चरण: हर उस पेज पर theme-color मेटा टैग जोड़ना जिसे आपको ब्रैंड के तौर पर दिखाना है
theme-color मेटा टैग से यह पक्का होता है कि पता बार को ब्रैंड के तौर पर तब दिखाया जाए, जब
जब कोई उपयोगकर्ता आपकी साइट पर किसी सामान्य वेबपेज के तौर पर आता है.
टैग की content एट्रिब्यूट को सीएसएस रंग की किसी मान्य वैल्यू पर सेट करें:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="theme-color" content="#317EFB"/>
…
</head>
…
Google कीtheme-color
Android के लिए Chrome 39 में theme-color के लिए सहायता.
दूसरा चरण: अपने वेब ऐप्लिकेशन मेनिफ़ेस्ट में theme_color प्रॉपर्टी जोड़ना
आपके वेब ऐप्लिकेशन मेनिफ़ेस्ट में मौजूद theme_color प्रॉपर्टी से यह पक्का किया जाता है कि
जब कोई उपयोगकर्ता होम स्क्रीन से आपका PWA लॉन्च करता है, तो बार को ब्रैंड के तौर पर दिखाया जाता है.
theme-color मेटा टैग के उलट, आपको सिर्फ़ इनकी ज़रूरत होगी
मेनिफ़ेस्ट में जाकर इसे एक बार परिभाषित किया जा सकता है.
प्रॉपर्टी को किसी भी मान्य 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)