Dark Mode Favicons (prefers-color-scheme)
Dark mode favicon operating system की light या dark सेटिंग के साथ बदलता है ताकि यह एक गहरे या हल्के browser chrome के सामने पठनीय बना रहे। दो तरीक़े काम करते हैं: एक SVG favicon जिसमें एक prefers-color-scheme media query हो जो ख़ुद को फिर से रँगती है, या media="(prefers-color-scheme: dark)" के साथ उनके link tags पर घोषित दो PNG फ़ाइलें। एक अकेला mid-tone आइकन जो दोनों पर पढ़ा जाए, सबसे सरल विकल्प है।
इसे प्रतिक्रिया देने के दो तरीक़े
साफ़-सुथरा तरीक़ा है एक SVG favicon जिसकी अपनी styles में एक prefers-color-scheme media query हो, ताकि OS के dark पर स्विच करने पर वही एक फ़ाइल ख़ुद को फिर से रँग ले। जो browsers SVG favicons रेंडर करते हैं और media query का सम्मान करते हैं (Safari और Firefox समेत) वे बिना किसी अतिरिक्त tag के इस बदलाव को पकड़ लेते हैं।
विकल्प है दो raster फ़ाइलें: एक सामान्य आइकन और एक dark-अनुकूलित, हर एक एक link tag पर एक media attribute ढोते हुए। media द्वारा PNG favicons बदलने का support SVG मार्ग से कम सुसंगत है, इसलिए हमेशा एक डिफ़ॉल्ट आइकन रखें जो अपने दम पर खड़ा हो।
दो-फ़ाइल वाला तरीक़ा
<link rel="icon" href="/favicon-light.png" media="(prefers-color-scheme: light)" />
<link rel="icon" href="/favicon-dark.png" media="(prefers-color-scheme: dark)" />
<link rel="icon" href="/favicon.ico" sizes="any" />सादा favicon.ico उस हर चीज़ के लिए fallback है जो media attribute को अनदेखा करती है।
Dark mode favicon FAQ
मैं dark mode favicon कैसे बनाऊँ?
या तो एक SVG favicon के अंदर एक prefers-color-scheme media query रखें ताकि वह ख़ुद को फिर से रँगे, या media="(prefers-color-scheme: dark)" और light के साथ उनके link tags पर दो PNG घोषित करें। fallback के रूप में एक सादा favicon.ico रखें।
क्या favicons पर media attribute हर जगह काम करता है?
नहीं। prefers-color-scheme द्वारा favicons बदलने का support browsers के बीच असमान है, इसीलिए आप हमेशा एक डिफ़ॉल्ट आइकन रखते हैं जो theme चाहे जो हो काम करे।
SVG media query या दो PNG?
SVG मार्ग एक फ़ाइल है और theme switching के लिए आमतौर पर बेहतर समर्थित। दो PNG प्रति theme pixel-स्तर का नियंत्रण देती हैं पर कम सुसंगत media-attribute संचालन पर निर्भर करती हैं।