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