theme-color: आपके page के इर्द-गिर्द Browser UI रँगना
theme-color एक meta tag है जो browser को बताता है कि वह आपके page के इर्द-गिर्द अपने ही UI को किस रंग में रँगे: Android पर Chrome में address bar का क्षेत्र, इंस्टॉल किए गए PWA का window chrome, और हाल के Safari में window का शीर्ष। आप इसे theme-color नाम वाले meta tag और एक colour मान से सेट करते हैं, और आप एक media attribute के साथ इनमें से दो घोषित कर सकते हैं ताकि यह light और dark mode का अनुसरण करे। एक web app manifest अपने theme_color field में इंस्टॉल किए गए app के लिए वही मान रखता है।
यह क्या बदलता है
theme-color आपके page के अंदर किसी चीज़ को प्रभावित नहीं करता। यह उसके इर्द-गिर्द browser के अपने surface को प्रभावित करता है, ताकि app और browser के बीच की सीमा एक दिखाई देने वाली दरार बनना बंद कर दे। फ़ोन पर, एक सफ़ेद address bar के नीचे एक गहरे रंग की साइट दो अलग चीज़ों जैसी पढ़ी जाती है; उन्हें मिला देना एक जैसा पढ़ा जाता है।
यह एक संकेत है, गारंटी नहीं। Browsers इसे वहाँ लागू करते हैं जहाँ उनके पास रँगने को surface हो और बाक़ी जगह अनदेखा करते हैं, और कुछ ऐसे मान अस्वीकार कर देंगे जिनका उनके अपने text से बहुत कम contrast हो। जब इसे अनदेखा किया जाता है तो कुछ नहीं टूटता।
Light और dark वेरिएंट
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0b0b0b" media="(prefers-color-scheme: dark)">Browser पहला वह tag चुनता है जिसकी media query मैच करती है। बिना media attribute वाला एक अकेला tag हर scheme में लागू होता है।
यह कहाँ लागू होता है
| Surface | प्रभाव |
|---|---|
| Android पर Chrome | address bar और status bar क्षेत्र को रँगता है |
| इंस्टॉल किया गया PWA | app के title bar या status bar को रँगता है |
| Safari (हाल के संस्करण) | macOS और iOS पर window के शीर्ष को रँगता है |
| Desktop Chrome tabs | एक सामान्य browser window पर कोई असर नहीं |
theme-color FAQ
क्या theme-color favicon से संबंधित है?
सिर्फ़ इस मायने में कि वे साथ भेजे जाते हैं और उन्हें मेल खाना चाहिए। favicon tab में साइट की पहचान कराता है; theme-color page के इर्द-गिर्द browser UI को रँगता है। Generators दोनों निकालते हैं क्योंकि वे एक ही brand palette से आते हैं।
कौन-से colour मान format की अनुमति है?
कोई भी CSS colour जिसे browser parse कर सके: hex, rgb(), hsl(), एक नामित रंग। Hex सबसे सुरक्षित विकल्प है क्योंकि यह parsers के बीच स्पष्ट है।
मेरा theme-color क्यों अनदेखा किया जा रहा है?
आम कारण हैं एक ऐसा media attribute जो मौजूदा scheme से कभी मैच न करे, पहले paint के बाद inject किया गया tag, या एक desktop browser जिसके पास रँगने को कोई surface ही नहीं है। पहले Android पर Chrome पर जाँचें, क्योंकि प्रभाव वहीं सबसे स्पष्ट दिखता है।