theme-color meta tag, समझाया गया

October 24, 2026· 5 min read

HTML की एक line जो mobile Chrome में address bar और installed apps में title bar को रंग देती है. इसका सही इस्तेमाल यहाँ जानें.

यह असल में क्या रंगता है

theme-color meta tag browser को बताता है कि आपकी page के बगल में मौजूद chrome के लिए कौन-सा colour इस्तेमाल करना है. mobile Chrome और कुछ Android browsers में यह address bar और status bar है. installed PWA में यह title bar और उसके आसपास का हिस्सा है. desktop browsers में यह आमतौर पर कुछ नहीं करता, इसलिए इसे mobile और installed-app feature मानें.

value एक single CSS colour होता है. एक hex value सुरक्षित विकल्प है. कुछ ऐसा चुनें जो आपके brand जैसा दिखे और फिर भी white या light text को पढ़ने योग्य रखे, क्योंकि browser आपके colour के ऊपर अपने खुद के icons और text draw करता है.

light और dark के लिए अलग colours

<meta
  name="theme-color"
  content="#ffffff"
  media="(prefers-color-scheme: light)"
>
<meta
  name="theme-color"
  content="#0b0b0f"
  media="(prefers-color-scheme: dark)"
>

दो tags, हर एक media query से scoped. browser वही चुनता है जो user के मौजूदा mode से match करती है. अगर आप दोनों के लिए सिर्फ़ एक colour चाहते हैं तो media attribute हटा दें.

इसे manifest के साथ sync में रखें

web app manifest का अपना theme_color field होता है. वह value meta tag का installed-app समतुल्य है: यह वह colour set करता है जो आपकी site के home screen से launch होने पर इस्तेमाल होता है. meta tag browser tab को कवर करता है, manifest installed window को कवर करता है.

दोनों set करें, और जब तक कोई ठोस कारण न हो, उन्हें एक ही colour पर set करें. एक mismatch का मतलब है कि आपकी address bar browser में एक colour की है और install के बाद title bar दूसरी — जो एक bug जैसा लगता है. पूरी field सूची के लिए manifest.json क्या है और web app manifest guide देखें.

सामान्य सवाल

क्या theme-color मेरा favicon बदल देता है?

नहीं. theme-color सिर्फ़ आपकी page के चारों ओर के browser UI को रंगता है. tab के favicon, apple-touch-icon, या किसी भी manifest icon पर इसका कोई असर नहीं होता. वे अलग image files हैं.

मेरा theme-color desktop पर काम क्यों नहीं कर रहा?

ज़्यादातर desktop browsers theme-color को अनदेखा करते हैं. यह mobile Chrome, कुछ Android browsers, और installed PWA windows के लिए बनाया गया है. इसे किसी phone पर या app install करने के बाद test करें, desktop tab में नहीं.

क्या theme-color को manifest के theme_color से match करना चाहिए?

हाँ, लगभग हर मामले में. meta tag browser tab को रंगता है और manifest का theme_color installed app window को रंगता है. अलग-अलग values का मतलब है कि जब कोई user आपकी site install करता है तो colour अचानक बदल जाता है.